angular - 在 Angular2 *ngFor 迭代中，如何只输出数组中的唯一值？

Question

它有内置管道吗？

data = [
  {id: 5, name: 'Roger'},
  {id: 5, name: 'Mark'},
  {id: 5, name: 'Zach'},
  {id: 5, name: 'Mark'},
  {id: 5, name: 'Roger'},
];

<ul>
  <li *ngFor="let datum of data">
    {{datum.name}}
  </li>
</ul>

---

输出

• 罗杰
• 马克
• 扎克
• 马克
• 罗杰

---

期望的输出

• 罗杰
• 马克
• 扎克

Answer 1

您可以创建自己的管道。

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash'; 

@Pipe({
  name: 'unique',
  pure: false
})

export class UniquePipe implements PipeTransform {
    transform(value: any): any{
        if(value!== undefined && value!== null){
            return _.uniqBy(value, 'name');
        }
        return value;
    }
}

您需要在组件中添加 UniquePipe，然后在 HTML 文件中添加管道。

<ul>
  <li *ngFor="let datum of data | unique">
    {{datum.name}}
  </li>
</ul>