IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Angular Discussion :

Filtrer une data en utilisant une liste


Sujet :

Angular

  1. #1
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut Filtrer une data en utilisant une liste
    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

  2. #2
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    un peu de mal à comprendre

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

  3. #3
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut
    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>

  4. #4
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    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 ?

  5. #5
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut
    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>

  6. #6
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    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 ?

  7. #7
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut
    Bonjour,

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

    Nom : cap.png
Affichages : 807
Taille : 21,2 Ko

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

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 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
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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

  8. #8
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    enfin, c'est claire !

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : 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
    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

  9. #9
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut
    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

    Voila le code de ma classe AppDataState:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
      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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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.

  10. #10
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    pour l'instant tu laisses les : any


    Code : 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
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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. #11
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 :

    Nom : cap.png
Affichages : 771
Taille : 7,9 Ko


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

  12. #12
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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) );

  13. #13
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut
    Bonjour,

    J'avais pas fais attention à data 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 : Sélectionner tout - Visualiser dans une fenêtre à part
         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.

  14. #14
    Membre éprouvé
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2019
    Messages
    707
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 42
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2019
    Messages : 707
    Points : 1 030
    Points
    1 030
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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. #15
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut
    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 ?

  16. #16
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 
            });;

  17. #17
    Membre régulier
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2011
    Messages
    181
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant

    Informations forums :
    Inscription : Mai 2011
    Messages : 181
    Points : 80
    Points
    80
    Par défaut
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
     
    *ngIf="(listRepositories$ | async)  as resultRepository"
                                [ngSwitch]="resultRepository?.dataState"

  18. #18
    Membre expert
    Avatar de dukoid
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Novembre 2012
    Messages
    2 100
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 100
    Points : 3 004
    Points
    3 004
    Par défaut
    oui faut adapter à la nouvelle situation

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div *ngIf="hasError">
    une erreur est survenue
    </div>

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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 
            });;

Discussions similaires

  1. Réponses: 3
    Dernier message: 24/05/2007, 12h23
  2. filtrer une liste en fonction d'une valeur
    Par robocop2776 dans le forum Access
    Réponses: 4
    Dernier message: 06/04/2007, 11h13
  3. Filtrer une liste déroulante
    Par Gone 23 dans le forum IHM
    Réponses: 7
    Dernier message: 20/03/2007, 15h06
  4. Filtrer une liste de classes
    Par neuromencien dans le forum Langage
    Réponses: 7
    Dernier message: 14/10/2006, 12h22
  5. Impossibilité de filtrer une liste déroulante
    Par lito74 dans le forum Access
    Réponses: 12
    Dernier message: 27/02/2006, 12h03

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo