Angular2 * ng親アイテムを非表示にする

Question

私はデータのリストを持っています。データ構造は1対多である。各親には複数の子アイテムがあります。私は、複製された親アイテムを隠すようにしています。しかし、それはすべての重複レコードを隠していることが分かります。私は以下のチュートリアルに従います。必要なヘルプ。全体のレコードを削除する代わりに、私は親アイテムを隠したいだけです。

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 

コード：

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

私はおそらく、このためのパイプを使用しwould't。また、私は本当に懸念の分離を実装していない。キーでデータをソートするための

ワン（クレジット、この答えhereにこのメソッド）：

は、私が最初にあなたのアプリケーションのコンポーネントを見て、二つの方法にそれを追加します

以下のデモhereと説明を参照してください。この方法は、親がすでに

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

と、リスト内の最後の項目がリスト

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

内の現在のアイテムと同じ親を持っていたかどうかを判断する別の方法を記載されているかどうかを判断することが容易になりますあなたのアプリケーションコンポーネントの次に、あなたのアカウント配列を確実に初期化する必要があります。コンストラクタの前にこれを行いました

account: any[]; 

コンストラクタは次のようになります。配列が塗りつぶされたら、必ずソートしてください。

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)); 
} 

最後に、htmlテンプレートは次のようになります。タグを自由に変更して見栄えを良くしてください。しかし、これはあなたが望むように生成するはずです。ここで私たちは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>