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>