代码之家 › 专栏 › 技术社区 › Nancy

如何使用角度4中的管道获得唯一元素

unique pipe filter angular

Nancy · 技术社区 · 6 年前

i have my facilitylistaray as below and i have clinicservices array inside it and i want to filter only unique elements from this clinic服务(获取唯一的parentname对象)数组列表。以下是设施星空的屏幕截图。在所附的图片中,我已经显示了第一个数组列表的扩展列表,其中包含诊所服务列表。同样,在第二个列表中,我有一个列表,其中有第一个列表的副本。因此,我只想从整个数组列表中获取唯一的clickServices。

下面是我的管道文件:

import pipe,pipetransform from'@angular/core';

@管道({
name:'removeduplicate'
})
导出类RemoveduplicatePipe实现PipeTransform{

转换(值:任何,参数?:任意):任意{
//删除重复的元素
常量art=value.map(x=>){
返回x.clinicservices.map(y=>){
返回Y值;
})(二)
})减少((acc,ele,i)=>。{
acc=acc.concat(ele);
返回ACC;
})(二)
返回新的集合(art);
}
}
使用管道的HTML代码:

<div class=“col-sm-12 required”*ngfor=“let facilitySearchResult of facilityIstaray removeDuplicate”>

<label class=“container”>
<input type=“checkbox”>设备搜索结果
<span class=“checkmark”></span>
</label>
</DIV>
不带管道的HTML代码:

如果我在没有管道的情况下使用下面的代码,我会得到清单,如果诊所服务正常,但有重复的元素。所以我实现了上面的管道代码,并像上面一样在我的HTML中使用它,但是它不起作用。我收到上面代码的空列表。非常感谢您的帮助。


<div class=“col-sm-12 required”*ngfor=“let facilitySearchResult of facilityIstaray;let i=index”>
<div class=“col-sm-12 required”*ngfor=“让FacilitySearchResult.Clinicservices;让j=index”>
<label class=“container”>
<input type=“checkbox”>设施服务结果。父项名称
<span class=“checkmark”></span>
</label>
</DIV>
</DIV>
我的FacilityIstaray如下所示,其中有Clinicservices数组,我只想从这个Clinicservices(get unique parentname object)数组列表中过滤唯一的元素。以下是设施星空的屏幕截图。在所附的图片中,我已经显示了第一个数组列表的扩展列表,其中包含诊所服务列表。同样,在第二个列表中,我有一个列表,其中有第一个列表的副本。所以我只想从整个数组列表中获得唯一的clickServices。


以下是我的管道文件:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'removeduplicate'
})
export class RemoveduplicatePipe implements PipeTransform {

  transform(value: any, args?: any): any {
    // Remove the duplicate elements
    const art = value.map( x => {
        return x.clinicServices.map(y => {
            return y.value;
        });
    }).reduce((acc, ele, i) => {
        acc = acc.concat(ele);
        return acc;
    });
    return new Set(art);
}
}


使用管道的HTML代码:

 <div class="col-sm-12 required" *ngFor="let facilitySearchResult of facilityListArray | removeduplicate">

                                    <label class="container">
                                      <input type="checkbox">{{facilitySearchResult}}
                                      <span class="checkmark"></span>
                                    </label>
                                  </div>


不带管道的HTML代码:

如果我在没有管道的情况下使用下面的代码,我会得到清单,如果诊所服务正常,但有重复的元素。所以我实现了上面的管道代码,并像上面一样在我的HTML中使用它,但是它不起作用。我收到上面代码的空列表。任何帮助都非常感谢。

 <div class="col-sm-12 required" *ngFor="let facilitySearchResult of facilityListArray; let i=index">
                                <div class="col-sm-12 required" *ngFor="let facilityServiceResult of facilitySearchResult.clinicServices; let j=index">
                                  <label class="container">
                                    <input type="checkbox">{{facilityServiceResult.parentName}}
                                    <span class="checkmark"></span>
                                  </label>
                                </div>
                              </div>

1 回复 | 直到 6 年前

j4rey 6 年前

你的一个小错误 Pipe

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'removeduplicate'
})
export class RemoveduplicatePipe implements PipeTransform {

    transform(value: any, args?: any): any {
        // Remove the duplicate elements
        const art = value.map( x => {
            return x.clinicServices?x.clinicServices.map(y => {
                return y.parentName?y.parentName:null; //<--parentName instead of value
            }):[];
        }).reduce((acc, ele, i) => {
            acc = acc.concat(ele);
            return acc;
        }).filter(z=>{ //<--to filter out null parentNames
            if(z){
                return z;
            }
        });
        return new Set(art);
    }
}

你应该能够得到 parentName 属于 clinicServices