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 ）。这样可以更容易地确定 parent 是否已经被列出

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

和另一种确定列表中的最后一项是否与列表中的当前项parent相同的方法

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 函数

显示 parent

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

Angular2 *ngFor 隐藏父项

Angular2 *ngFor hide parent items

datatable

typescript

ngfor

angular