Angular 在角度方向上使用管道过滤器从阵列中过滤唯一元素

我正在尝试使用Angular实现管道。下面是我尝试过的代码。我想检索完整列表的唯一性。因此，我为内部列表添加了一个管道过滤器名称。但我仍然得到了重复的元素。我添加了json作为参考。内部ArticleTags数组有一个对象列表。类似地，对于每个父数组，我都有多个ArticleTags数组。我想从整个列表ArticleTags数组中检索唯一的元素。我认为它是在特定的内部列表中检索唯一的元素，而不是从整个文章标签列表中检索

}

---

请参考此选项，因为它提供了唯一的过滤器

ex:array | unique:'Property（可选）'
这个项目=[1,2,3,1,2,3]；

首次导入模块

`import { FilterPipe} from 'your-custom-pipe-path';`

然后，您应该将自定义管道注入

@NgModule({
declarations: [
     FilterPipe
    ]
})

代码的其余部分可以。

---

希望这对您有所帮助。

假设您的文章[]是这样的：

articles = [
    {
        ArticleTitle: 'article one',
        ArticleTags: [
            {key:0, value:'Back'},
            {key:1, value:'Shoulder'},
            {key:2, value:'Injury'},
            {key:3, value:'Abs'}]
    },
    {
        ArticleTitle: 'article two',
        ArticleTags: [
            {key:3, value:'Abs'},
            {key:1, value:'Shoulder'},
            {key:4, value:'Leg'},
            {key:5, value:'Others'}]}
]


import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterUnique',
    pure: false
})
export class FilterPipe implements PipeTransform {
    transform(value: any, args?: any): any {
        // Remove the duplicate elements
        var art = value.map(x=>{
            return x.ArticleTags.map(y=>{ return y.value;});;
        }).reduce((acc,ele,i)=>{
            acc = acc.concat(ele);
            return acc;
        });
        return new Set(art);
    }
}

上面的管道返回一组包含articletag值的字符串

<ul>
    <li *ngFor="let a of articles | filterUnique">{{a}}</li>
</ul>

{{a}

因此，您正在循环通过

ArticlesListaray

获取

articlesResult

，然后在第二个

标记中，您正在循环通过

articlesResult.ArticleTags

获取唯一的

articlesTagResult

，而不是使用

articlesTagResult.value

，您正在使用

articlesResult.ArticleTags[j].value

？好的，所以我尝试使用{{articlesTagResult.value}}，但它仍然检索重复的元素。我还附上了输出的屏幕截图供您参考。第二个数组是元素列表。背部、受伤、生活方式、肩膀都在一个列表中。根据我的假设，它正在检索该数组中的唯一元素。但是它不能与其他数组元素列表相比较，或者我不确定。好的，我现在知道了，你有文章列表，每个文章都有标记，你想要所有文章的标记的并集……对吗？是的，你完全正确@j4rey89关于如何从.ts文件实现的任何线索。我已经粘贴了.ts代码以供参考。好的，然后尝试使用与服务器响应成角度的集合。它将只显示唯一的元素。我已经完成了所有这些操作。正如j4rey89在他的评论中提到的那样，我的要求被j4rey89很好地理解。你能尝试在你的组件中注入

@component（{pipes:[FilterPipe]}）

也尝试一下这个。我在管道文件中使用了代码，错误是无法读取未定义的属性“map”。请你把重复的代码从你的答案中删去，只留下一个答案。我看到有很多重复。但是，我在管道文件中提到的代码中得到了上述错误。删除了重复代码…..至于无法读取未定义的属性“map”，则

map

是

Array

的属性，请确保数据的类型为

Array

。实际上，我得到了显示的唯一元素列表：），但是，由于错误消息无法读取未定义的属性“map”，map是console中数组的属性：（但我仍然接受您的答案。如果我的答案帮助解决了您的问题，请检查绿色勾号。我已经完成了。但是，您知道我为什么会出现此错误，尽管我得到了正确的唯一列表吗？

@NgModule({
declarations: [
     FilterPipe
    ]
})

articles = [
    {
        ArticleTitle: 'article one',
        ArticleTags: [
            {key:0, value:'Back'},
            {key:1, value:'Shoulder'},
            {key:2, value:'Injury'},
            {key:3, value:'Abs'}]
    },
    {
        ArticleTitle: 'article two',
        ArticleTags: [
            {key:3, value:'Abs'},
            {key:1, value:'Shoulder'},
            {key:4, value:'Leg'},
            {key:5, value:'Others'}]}
]


import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
    name: 'filterUnique',
    pure: false
})
export class FilterPipe implements PipeTransform {
    transform(value: any, args?: any): any {
        // Remove the duplicate elements
        var art = value.map(x=>{
            return x.ArticleTags.map(y=>{ return y.value;});;
        }).reduce((acc,ele,i)=>{
            acc = acc.concat(ele);
            return acc;
        });
        return new Set(art);
    }
}

<ul>
    <li *ngFor="let a of articles | filterUnique">{{a}}</li>
</ul>