如何在角度 4 中使用管道获取独特元素

Question

我的 facilityListArray 如下所示，里面有 ClinicServices 数组，我想只过滤来自这个 ClinicServices 的唯一元素（获取唯一的 parentName 对象）数组列表。下面是facilityListArray 的屏幕截图。在附图中，我显示了第一个数组列表的扩展列表，其中包含诊所服务列表。同样，在第二个列表中，我有一个 ClinicServices 列表，其中包含第一个列表的重复项。所以我只想从整个数组列表中获取唯一的 clincServices。

下面是我的管道文件：

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代码：

如果我在没有管道的情况下使用下面的代码，如果 ClinicService 正确但有重复的元素，我会得到列表。所以我实现了上面的管道代码并在我的 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>

Answer 1

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