Question

我有我的facilityListArray如下所示，我在其中有clinServices数组，我想只过滤来自这个clinicServices（获取唯一的parentName对象）数组列表中的唯一元素。下面是facilityListArray的屏幕截图。在附图中，我已经显示了第一个数组列表的扩展列表，其中包含了clinService列表。同样在第二个列表中，我有clinServices列表，其中包含第一个列表的副本。所以我想从整个数组列表中获得唯一的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代码：

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

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

如何使用角度4

1 个答案: