Discussion :

[dibax10]

Bonjour à tous,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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 ?

[dibax10]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[dukoid]

comprends rien !

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<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 ?

[dibax10]

Désolé j'ai pas tous copier

Je veux filtrer cette data:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[dukoid]

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?