Filtrer une data en utilisant une liste

Version imprimable

Bonjour à tous,

j'ai une data récupéré depuis une BD avec trois state : loading, loaded et error
Code:

1 2 3 4 5 6 this.projects$ = this.projectService.getProject().pipe( map(data1 => ({dataState: DataStateEnum.LOADED, data: data1})), startWith({dataState: DataStateEnum.LOADING}), catchError(err => of({dataState: DataStateEnum.ERROR, errorMessage: err.message}) ));
J'ai une mat-select avec choix multiple qui me permet d'alimenter une liste je souhaite filtrer ma data en utilisant cette liste. Ci-après la fonction qui me permet de remplir ma liste :
Code:

1 2 3 4 5 6 7 8 9 selectedProject(value: any) { if(!this.idProjectList.includes(value)) { this.idProjectList.push(value) }else { this.idProjectList= this.idProjectList.filter(item => item !==value) } }
Quelqu'un à une idée comment je peux faire cela svp?

Merci

08/02/2022, 12h38
krakatoa

un peu de mal à comprendre

tu veux filtrer une liste de donnée sur le critere (loading, loader) via un select
c'est ça ?

Je veux filtrer les données que je reçois via l'API grâce à mon mat-select.

Pour le loading et la loaded c'est seulement le statut de la récupération de ma data que je gère après au niveau du DOM

Ci-après mon code html:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<ng-container *ngIf="(projects$ | async)  as resultProject" [ngSwitch]="resultProject?.dataState">
  <ng-container *ngSwitchCase="dataStateEnum?.LOADING">
    <div class="loadingPoint"></div>
  </ng-container>
  <ng-container *ngSwitchCase="dataStateEnum?.ERROR">
           <span class="errorMessage" *ngIf="resultProject"><mat-icon>error</mat-icon>
             {{resultProject?.errorMessage}}</span>
  </ng-container>
  <ng-container *ngSwitchCase="dataStateEnum?.LOADED">
    <mat-form-field appearance="fill" appearance="legacy" fxFlex="30">
      <mat-label>Project</mat-label>
      <mat-select [formControl]="projectControl" multiple>
                   <span class="comboContent">
        <mat-option *ngFor="let project of resultProject?.data" (onSelectionChange)="selectedProject(project.idProject)"
                    [value]="project">{{project.nameProject}}</mat-option>
                   </span>
      </mat-select>
    </mat-form-field>
  </ng-container>
</ng-container>

08/02/2022, 17h04
dukoid

comprends rien !

tu recuperes des données d'une api
puis tu remplis un select avec ces données :

Code:

<mat-option *ngFor="let project of resultProject?.data" (onSelectionChange)="selectedProject(project.idProject)" [value]="project">{{project.nameProject}}</mat-option>

une fois qu'on selectionne quelquechose dans le select, tu veux filtrer quoi ?

Désolé j'ai pas tous copier :?

Je veux filtrer cette data:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
   <mat-card fxFlex="30">
                      <table>
                        <thead>
                        <th>Links</th>
                        <th class="tableHead">Power BI reports</th>
                        </thead>
                      </table>
                      <div class="table-scroll">
                        <table>
                          <tbody *ngFor="let raport of resultReport?.data!">
 
                          <ng-container *ngFor="let project of resultProject?.data!">
                            <ng-container *ngIf="project.idProject === raport.project.idProject">
                              <tr>
                                <td><img src="assets/icons/poupee.png"
                                                                                      class="iconList"> </td>                                <td>DELIVERY REPORT [{{raport.project.nameProject}}]</td>
                              </tr>
                            </ng-container>
 
                          </ng-container>
                          </tbody>
                        </table>
                      </div>
                    </mat-card>

Code:

1 2 3 4 5 6 7 8 9 10 11 12 selectedProject(value: any) { console.log(value); // ça donne quoi ? if(!this.idProjectList.includes(value)) // value devrait etre un tableau, ça ne fonctionne pas avec includes { this.idProjectList.push(value) }else { this.idProjectList= this.idProjectList.filter(item => item !==value) } }
la liste qui doit être affiché et filtré c'est idProjectList, c'est bien ça ?
si oui, pour l'affichage de la liste, pourquoi *ngFor sur idProjectList dans le code html ?

1 pièce(s) jointe(s)

Bonjour,

Je pense j'ai très mal formuler m'a demande. Voila ce que je souhaites :

Pièce jointe 613384

La liste déroulante des projets et la liste des rapports sont alimenter dans mon ngInit voila le code :

Code:

1
2
3
4
5
6
7
8
9
10
      this.listReports$ = this.reportService.getAllReports().pipe(
        map(data => ({dataState: DataStateEnum.LOADED, data: data})),
        startWith({dataState: DataStateEnum.LOADING}),
        catchError(err => of({dataState: DataStateEnum.ERROR, errorMessage: err.message})
        ));
      this.projects$ = this.projectService.getProject().pipe(
        map(data1 => ({dataState: DataStateEnum.LOADED, data: data1})),
        startWith({dataState: DataStateEnum.LOADING}),
        catchError(err => of({dataState: DataStateEnum.ERROR, errorMessage: err.message})
        ));

voila le code de ma liste déroulante de projet et rapport au niveau html :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<ng-container *ngIf="(projects$ | async)  as resultProject" [ngSwitch]="resultProject?.dataState">
  <ng-container *ngIf="(listReports$ | async)  as resultReport" [ngSwitch]="resultReport?.dataState">
 
  <ng-container *ngSwitchCase="dataStateEnum?.LOADING">
    <div class="loadingPoint"></div>
  </ng-container>
  <ng-container *ngSwitchCase="dataStateEnum?.ERROR">
           <span class="errorMessage" *ngIf="resultProject"><mat-icon>error</mat-icon>
             {{resultProject?.errorMessage}}</span>
  <span class="errorMessage" *ngIf="resultReport"><mat-icon>error</mat-icon>
             {{resultReport?.errorMessage}}</span>
  </ng-container>
  <ng-container *ngSwitchCase="dataStateEnum?.LOADED">
    <mat-form-field appearance="fill" appearance="legacy" fxFlex="30">
      <mat-label>Project</mat-label>
      <mat-select [formControl]="projectControl" multiple>
                   <span class="comboContent">
        <mat-option *ngFor="let project of resultProject?.data" (onSelectionChange)="selectedProject(project.idProject)"
                    [value]="project">{{project.nameProject}}</mat-option>
                   </span>
      </mat-select>
    </mat-form-field>
 
  <mat-card fxFlex="30">
                      <table>
                        <thead>
                        <th>Links</th>
                        <th class="tableHead">Power BI reports</th>
                        </thead>
                      </table>
                      <div class="table-scroll">
                        <table>
                          <tbody *ngFor="let raport of resultReport?.data!">
 
                          <ng-container *ngFor="let project of resultProject?.data!">
                            <ng-container *ngIf="project.idProject === raport.project.idProject">
                              <tr>
                                <td><img src="assets/icons/poupee.png"
                                                                                      class="iconList"> </td>                                <td>DELIVERY REPORT [{{raport.project.nameProject}}]</td>
                              </tr>
                            </ng-container>
 
                          </ng-container>
                          </tbody>
                        </table>
                      </div>
                    </mat-card>
  </ng-container>
  </ng-container>
</ng-container>

en TS j'alimente une liste en fonction des projets sélectionner dans ma liste déroulante :

Code:

1
2
3
4
5
6
7
8
9
10
 
selectedProject(value: any) {
if(!this.idProjectList.includes(value))
{
  this.idProjectList.push(value)
}else
{
  this.idProjectList=  this.idProjectList.filter(item => item !==value)
}
  }

A l'aide de cette liste idProjectList je veux filtrer ma liste des rapports :listReports$

J'espère que ma demande est plus claire

enfin, c'est claire !:)

Code:

1
2
3
4
5
6
7
<ng-container *ngIf="(projects$ | async)  as resultProject" [ngSwitch]="resultProject?.dataState">
  ....  check box 
</ng-container>
 
<ng-container *ngIf="reports" [ngSwitch]="reports?.dataState">
 ...  liste
</ng-container>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
reports: any;
sub!: subscription;
 
ngOnInit() {
        this.sub = this.reportService.getAllReports().pipe(
          map(data => ({dataState: DataStateEnum.LOADED, data: data})),
          startWith({dataState: DataStateEnum.LOADING}),
          catchError(err => of({dataState: DataStateEnum.ERROR, errorMessage: err.message})
        )).subscribe((reports: any) => {
             this.reports = reports;
        });;
       ...
}
selectedProject(value: any) {
  console.log(value); //  ça donne quoi ?
/*  
  ici faut filtrer :  this.reports
  à chaque modification de this.reports il sera mise à jour automatiquement dans la vue
*/
 
  ...
}
 
ngOnDestroy() {
  this.sub.unsubscribe();    // toujours se désinscrire !
}

pour info j'ai renommé listReports en reports !
pas besoi nde mettre list dans le nommage vu qu'il ya un S à reports

Bonsoir,

Je m'excuse pour la réponse tardive.

J'ai essayé ce que tu m'as proposé mais ça fonctionne pas peu être que j'ai loupé un truc :roll:

Voila le code de ma classe AppDataState:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 export enum DataStateEnum { LOADING, LOADED, ERROR } export interface AppDataState<T> { dataState?:DataStateEnum, data?:T, errorMessage?:string, }
Ensuite normalement je déclare ma liste comme ça :

Code:

public reports?:Observable<AppDataState<Report[]>>;

Car sinon j'ai aucun moyen de contrôler si la liste de rapport est bien chargé ou non (même avec le type any ça fonctionne pas )

Alors que toi tu utilise sub mais qu'après tu l'utilise plus a part pour le détruire si tu peux m'expliquer pourquoi stp?

Ensuite pour répondre à ta question
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 selectedProject(value: any) { console.log(value) // me retourne l'id du projet coché if(!this.idProjectList.includes(value)) // je le rajoute à cette liste { this.idProjectList.push(value) this.reports= this.reports.filter((item: { idProject: any; }) => !this.idProjectList.includes(item.idProject) ) // j'essaie de filtrer ma liste de rapport qu'avec les projets selectionnés mais cela ne fonctionne pas :( }else { this.idProjectList= this.idProjectList.filter(item => item !==value) } }
J'espère que vous pourrez m'aider j'ai vraiment besoin de débloquer ce point

Merci.

pour l'instant tu laisses les : any

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
reportsDatabase: any;         // contient les reports de l'api
reportsFiltered: any;               // contient les reports filtrés ,  tu fais le ngFor avec dans la vue
sub!: subscription;
 
ngOnInit() {
        this.sub = this.reportService.getAllReports().pipe(
          map(data => ({dataState: DataStateEnum.LOADED, data: data})),
          startWith({dataState: DataStateEnum.LOADING}),
          catchError(err => of({dataState: DataStateEnum.ERROR, errorMessage: err.message})
        )).subscribe((reports: any) => {
             this.reportsDatabase = reports;   // tu vois bien que les résultats je le mets dans la variable : reportsDatabase 
        });;
       ...
}

selectedProject(value: any) {
  console.log(value) 
  if(!this.idProjectList.includes(value))
  {
     console.log("IF"); 

    this.idProjectList.push(value)
    console.log("checks ", this.idProjectList);  // verifie qu'avec 2 cochés, on a bien un tableau avec 2 éléments

    console.log("reportsDatabase", this.reportsDatabase);
    this.reportsFiltered= this.reportsDatabase.filter((item:any) => !this.idProjectList.includes(item.idProject) );
    console.log("reportsFiltered", this.reportsFiltered);   // verifie que tu as bien ta liste filtrés !

  } else {
    console.log("ELSE"); 
    console.log("idProjectList", this.idProjectList);
    this.idProjectList=  this.idProjectList.filter(item => item !==value)
    console.log("idProjectList", this.idProjectList);   // verifie que tu as bien le bon résultat
  }
}

Code:

1
2
3
4
<div *ngfor="let report of reportsfiltered">
  {{ report |json }}
<div>

de façon générale, n'hesite pas à mettre des console.log partout comme j'ai fait pour débuguer
quand on débute, il faut faire ainsi !

11/02/2022, 13h51
dibax10

1 pièce(s) jointe(s)
Bonjour,

Merci pour ton aide précieuse. Effectivement, les consoles.log m'aident à mieux comprendre le problème

J'ai utilisé exactement le même code que tu m'as envoyé j'ai juste modifié cette ligne car j'avais une erreur reportdatabase not a function et mon idproject se trouve dans l'object project
Code:

1 2 this.reportsFiltered = Object.values(this.reportsDatabase).filter((item: any) =>!this.idProjectList.includes(item.project!?.idProject))
Voila ce que j'ai dans la console. Ca ne filtre toujours pas malgré que mon tableau des ids projets est bien rempli :

Pièce jointe 613500

Si tu vois d’où peut venir le problème stp

tu vois bien que : reportsDatabase
est composé d'une propriété : data ?

c'est donc dans reportsDatabase.data que se trouve tous tes reports !

dans la console, ouvre : reportsDatabase data ^ (la petite fleche)
ainsi tu peux voir la structure !

donc dans ton filtre tu n'indique pas data
Code:

1 2 3 4 5 // pas bon this.reportsFiltered= this.reportsDatabase.filter((item:any) => !this.idProjectList.includes(item.idProject) ); // bon (normalement) je ne vois pas la suite avec la ^ pour te dire si la suite est vraiment correct cad que l'on va trouver : idProject this.reportsFiltered= this.reportsDatabase.data.filter((item:any) => !this.idProjectList.includes(item.idProject) );

14/02/2022, 17h50
dibax10

Bonjour,

J'avais pas fais attention à data :mouarf: c'est bon j'arrive à filtrer merci beaucoup.

J'ai deux questions stp :
- quand je décoche un projet ma liste se rafraichie pas même si j'ai rajouté cette ligne dans le else :

Code:

this.reportsFiltered= this.reportsDatabase.data.filter((item:any) => this.idProjectList.includes(item.idProject) );

- avec subscribe comment je peux gérer mes states comme je faisais dans pipe pour savoir si ma data est bien chargé, s'il a une erreur ?

Merci.

Code:

1
2
3
 
this.reportsFiltered= this.reportsDatabase.data.filter((item:any) => !this.idProjectList.includes(item.idProject) );
console.log(this.reportsFiltered);   // ça donne quoi ? c'est filtré ou pas ?

// si non alors le filter n'est pas bon

15/02/2022, 16h46
dibax10

Super, ça fonctionne! par contre, avec subscribe comment je peux gérer mes states comme je faisais dans pipe pour savoir si ma data est bien chargé, s'il a une erreur ?

Code:

1
2
3
4
5
6
7
8
9

 this.sub = this.reportService.getAllReports().pipe(
          map(data => ({dataState: DataStateEnum.LOADED, data: data})),
          startWith({dataState: DataStateEnum.LOADING}),
          catchError(err =>  ............ ici .....................)   
        )).subscribe((reports: any) => {
             this.reportsDatabase = reports;   // tu vois bien que les résultats je le mets dans la variable : reportsDatabase 
        });;

Bonjour

Donc je vais devoir stocker mon erreur dans une variable et aussi si la page est toujours en cours de chargement. Ce n'est plus possible de travailler avec async comme je faisais avant :
Ma classe AppDataState :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 export enum DataStateEnum { LOADING, LOADED, ERROR } export interface AppDataState<T> { dataState?:DataStateEnum, data?:T, errorMessage?:string, }
Code:

1 2 3 4 *ngIf="(listRepositories$ | async) as resultRepository" [ngSwitch]="resultRepository?.dataState"

oui faut adapter à la nouvelle situation

Code:

1
2
3
<div *ngIf="hasError">
une erreur est survenue
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
hasError = false;
 
this.sub = this.reportService.getAllReports().pipe(
          map(data => ({dataState: DataStateEnum.LOADED, data: data})),
          startWith({dataState: DataStateEnum.LOADING}),
          catchError(err =>  
              hasError = true;
           )   
        )).subscribe((reports: any) => {
              hasError = false;
             this.reportsDatabase = reports;   // tu vois bien que les résultats je le mets dans la variable : reportsDatabase 
        });;