Angular2 * ngFor隱藏父項

Question

我有一個數據列表。數據結構是一對多的。每個家長都有多個子項目。我嘗試隱藏重複的父項。但它隱藏了所有重複的記錄。我按照下面的教程。需要幫助。我只想隱藏父母項目，而不是刪除整個記錄。

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

我可能我就不會用管這個。另外我還沒有真正實現關注的分離。

見下文

演示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模板應該看起來像這樣。隨時更改標籤，使其看起來更好，但這應該產生像你想要的。在這裏，我將在指數跟蹤我們在for循環，其中和我們ngif指令，以決定是否要顯示取決於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>