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>