Angular2 * ngPour masquer les éléments parents

Question

J'ai une liste de données. La structure de données est une à plusieurs. Chaque parent a plusieurs éléments enfants. J'essaye de cacher les éléments parents dupliqués. Mais il s'avère cacher tous les enregistrements dupliqués. Je suis le tutoriel ci-dessous. Besoin d'aide. Au lieu de supprimer tout le dossier, je veux juste cacher l'élément parents.

My datatable:  Failed Results:   Expected Results: 

Parent Child   Parent Child     Parent Child 
Lee 123   Lee 123      Lee 123 
Lee 124   Rose 111       124 
Lee 125             125 
Rose 111           Rose 111 

Code:

//our root app component 
    import { Component, NgModule, VERSION } from '@angular/core' 
    import { BrowserModule } from '@angular/platform-browser' 
    import { Pipe, PipeTransform, Injectable } from '@angular/core' 


    @Pipe({ 
     name: 'uniqFilter', 
     pure: false 
    }) 
    @Injectable() 
    export class UniquePipe implements PipeTransform { 
     transform(items: any[], args: any[]): any { 
      // filter items array, items which match and return true will be kept, false will be filtered out 

      return _.uniqBy(items, args); 
     } 
    } 

    @Component({ 
     selector: 'my-app', 
     providers: [], 
     template: ` 
     <div> 
        <ul> 
         <li *ngFor="let account of accounts | uniqFilter:'Parent'">{{ account.Parent }} and {{ account.Child }}</li> 
        </ul> 
     </div> 
     `, 
     directives: [], 
     pipes: [UniquePipe] 
    }) 
    export class App { 
     constructor() { 
      this.accounts = [{ 
       "Parent": 'Lee', 
       "Child": "4/6/2016" 
      }, 
      { 
       "Parent": 'Lee', 
       "Child": "4/7/2016" 
      }, 

      { 
       "Parent": 'Rose', 
       "Child": "4/9/2016" 
      }, 
      { 
       "Parent": 'Rose', 
       "Child": "4/10/2016" 
      }, 

      { 
       "Parent": 'Lee', 
       "Child": "4/12/2016" 
      }]; 
     } 
    } 

    @NgModule({ 
     imports: [ BrowserModule ], 
     declarations: [ App, UniquePipe ], 
     bootstrap: [ App ], 
     providers: [ UniquePipe ] 
    }) 
    export class AppModule {} 

Answer 1

Je would't probablement utiliser un tuyau pour cela. De plus, je n'ai pas vraiment mis en place la séparation des préoccupations.

voir la démo here et explication ci-dessous

Je voudrais tout d'abord regarder votre composant application et ajouter deux méthodes, il:

Un pour trier vos données par la clé (crédit cette méthode pour cette réponse here). De cette façon, il est plus facile de déterminer si un parent a été inscrit déjà

// sort on key values 
keysrt(key,desc) { 
    return function(a,b){ 
    return desc ? ~~(a[key] < b[key]) : ~~(a[key] > b[key]); 
    } 
} 

et une autre méthode pour déterminer si le dernier élément de la liste avait le même parent que l'élément en cours dans la liste

lastParent(i){ 
    if(i>0){ 
     if (this.accounts[i].Parent === this.accounts[i-1].Parent) 
     return false; 
     else 
     return true; 
    } 
    else 
     return true; 
} 

Ensuite, dans votre composant d'application, vous voulez vous assurer d'initialiser votre tableau de comptes. Je l'ai fait avant le constructeur

account: any[]; 

alors votre constructeur devrait ressembler à ceci. Assurez-vous de trier après que le tableau a été rempli.

constructor() { 
     this.accounts = [{ 
      "Parent": 'Lee', 
      "Child": "4/6/2016" 
     }, 
     { 
      "Parent": 'Lee', 
      "Child": "4/7/2016" 
     }, 

     { 
      "Parent": 'Rose', 
      "Child": "4/9/2016" 
     }, 
     { 
      "Parent": 'Rose', 
      "Child": "4/10/2016" 
     }, 

     { 
      "Parent": 'Lee', 
      "Child": "4/12/2016" 
     }]; 

     this.accounts.sort(this.keysrt('Parent', true)); 
} 

Enfin, votre modèle html devrait ressembler à ceci. n'hésitez pas à changer les tags pour les rendre plus beaux, mais cela devrait produire comme vous voulez. Ici, je l'index de garder une trace de l'endroit où nous sommes dans la boucle et nous la directive ngif de décider si oui ou non montrer le parent en fonction de la fonction lastParent

<div> 
    <ul> 
     <li *ngFor="let account of accounts; let i = index"> 
      <div *ngIf = "lastParent(i)">{{ account.Parent}}</div> 
       and {{ account.Child }} 
     </li> 
    </ul> 
</div>