如何获取 *ngFor 循环唯一记录答案

【问题标题】：How go get *ngFor loop unique records如何获取 *ngFor 循环唯一记录
【发布时间】：2017-04-20 07:07:21
【问题描述】：

如何从此数组中获取唯一记录。我需要从这个项目数组中获得唯一的{{ subitem.author }}。

<div *ngFor="let item of items">   
    <ion-list *ngFor="let subitem of item.items" (click)="authorquotes(subitem.author);">
        <ion-item >
            {{ subitem.author }} 
        </ion-item>
    </ion-list>
</div>

在有多个记录的数组中。从该数组中，我需要过滤唯一作者。

【问题讨论】：

你的意思是唯一记录？
在你的控制器中创建一个独特项目的列表，然后循环。
*ngFor 在这里帮不了你。您可以创建一个过滤重复项的管道，也可以使用*ngFor 中已过滤重复项的列表。
stackoverflow.com/questions/11246758/…
这听起来不是一个好的论点。 Angular 仅在值更改（不同的数组实例）时执行它。如果你使管道不纯，只要参数或输入值没有改变，你仍然可以缓存结果和返回的缓存结果。这似乎并不比其他方法更糟糕。

标签： javascript angular

【解决方案1】：

您必须创建一个管道来过滤具有唯一项的数组：

@Pipe({
  name: 'filterUnique',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {

    // Remove the duplicate elements
    let uniqueArray = value.filter(function (el, index, array) { 
      return array.indexOf (el) == index;
    });

    return uniqueArray;
  }
}

然后你可以应用你的管道：

<div *ngFor="let item of items | filterUnique">   
    <ion-list *ngFor="let subitem of item.items" (click)="authorquotes(subitem.author);">
        <ion-item >
            {{ subitem.author }} 
        </ion-item>
    </ion-list>
</div>

工作演示：https://plnkr.co/edit/yxvoKVD3Nvgz0T3AB7w3?p=preview

【讨论】：

不使用filter和indexOf，可以使用ES6设置stackoverflow.com/a/33121880/6806381
@ChristopherMoore 谢谢 :) 这是一个好方法。稍后我可以用你的 ES6 解决方案更新我的帖子。
嗨，如何在 ion-virtual-scroll 中使用这个管道？