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和以下说明

我首先会看看你的app组件并添加两个方法：

一个用于按键对数据进行排序（将此方法归功于此答案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>

Angular2 * ng用于隐藏父项

1 个答案: