Angular 管道隐藏数组中的重复项

Question

我想创建一个管道来检查特定对象，而不是全部。这 Pipe 将不得不隐藏重复项。

管道

import { Pipe } from '@angular/core'
@Pipe({
    name: 'removeduplicates'
})
export class RemovePipe {

}

模板

<tbody *ngFor="let dt of ash let i = index | removeduplicates: " >
    <tr>
        <td class="tg-yw4l nobord"  style="border-left:  inset;border-right:  none;">{{dt.values}}</td>          
        </tr>
    <tr>            
        <td>{{dt.value2}}</td>
    </tr>
</tbody>

Answer 1

请在您的组件上添加删除重复项的功能

result:any=[];
removeDupliacate(){
   this.ash.forEach(function(item) {
        if(this.result.indexOf(item) < 0) {
            this.result.push(item);
        }
   });
}

然后在您的模板中

<tbody *ngFor="let dt of result;let i = index" >
    <tr>
        <td class="tg-yw4l nobord"  style="border-left:  inset;border-right:  none;">{{dt.values}}</td>          
        </tr>
    <tr>            
        <td>{{dt.value2}}</td>
    </tr>
</tbody>

或者你可以通过安装

在 lodash 的帮助下实现管道

$ npm install --save lodash

这个可以帮助你安装和使用lodash

在你的组件中：

import { Pipe, PipeTransform } from '@angular/core';
import * as _ from 'lodash'; 
@Pipe({
    name: 'removeduplicates'
})
export class RemovePipe implements PipeTransform{
   transform(value: any): any{
        if(value!== undefined && value!== null){
            return _.uniqBy(value, 'name');
        }
        return value;
    }
}

并在您的模板中

<tbody *ngFor="let dt of ash let i = index | removeduplicates" >
    <tr>
        <td class="tg-yw4l nobord"  style="border-left:  inset;border-right:  none;">{{dt.values}}</td>          
        </tr>
    <tr>            
        <td>{{dt.value2}}</td>
    </tr>
</tbody>

Angular 管道隐藏数组中的重复项

Angular Pipe to Hide Duplicates from Array

angular-pipe

angular