如何在Angle 4中使用管道获取唯一元素 [英] How to get unique elements using pipe in angular 4

问题描述

我的设施列表如下所示，并且其中具有临床服务数组，并且我只希望从此临床服务(获取唯一的parentName对象)数组列表中过滤唯一的元素.下面是facilityListArray的屏幕截图.在所附的图像中，我显示了第一个数组列表的展开列表，该列表具有临床服务列表.同样，在第二个列表中，我有一份临床服务列表，其中有第一个列表的重复项.所以我只想从整个数组列表中获得唯一的clincServices.

I have my facilityListArray as below and I have clinicServices array inside it and I want to filter only unique elements from this clinicServices (get unique parentName object ) array list. Below is the screen shot of facilityListArray. In the attached image, I have shown the expanded list for first array list which has list of clinicService. Similarly inside second list, I have list of clinicServices which has duplicates of the first list. So i want to get only unique clincServices from entire list of array.

以下是我的管道文件:

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);
}
}

使用Pipe的HTML代码:

HTML code Using Pipe :

 <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 code without pipe:

如果我使用下面的代码而不使用管道，那么如果临床服务正确但具有重复的元素，我将获得列表.所以我实现了上面的Pipe代码，并在上面的HTML中使用了它，但是它不起作用.我正在上面的代码空列表.任何帮助都将受到高度赞赏.

If i use the below code without pipe, I am getting list if clinicService properly but with duplicate elementes. So i implemented the above Pipe code and used that in my HTML as above, but it doesnt work. I am getting empty list with above code . Any help is highly appreciated.

 <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>

推荐答案

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);
    }
}

您应该能够获得clinicServices的唯一parentName

And you should be able to get the unique parentName of clinicServices

这篇关于如何在Angle 4中使用管道获取唯一元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！