在Angular2 * ngFor迭代中,如何仅输出数组中的唯一值？

发布时间：2020-12-17 08:00:08 所属栏目：安全来源：网络整理

导读：它有内置管道吗？ data = [ {id: 5,name: 'Roger'},{id: 5,name: 'Mark'},name: 'Zach'},];ul li *ngFor="let datum of data" {{datum.name}} /li/ul 产量罗杰马克扎克马克罗杰期望的输出罗杰马克扎克您可以创建自己的管道. import { Pipe,PipeTra

它有内置管道吗？

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

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

产量

>罗杰
>马克
>扎克
>马克
>罗杰

期望的输出

>罗杰
>马克
>扎克

您可以创建自己的管道.

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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!