我正在尝试使用Angular实现管道。以下是我尝试过的代码。我想检索完整列表的唯一。所以我为内部列表添加了一个管道过滤器名称。但我仍然得到重复的元素。我已经添加了json以供参考。内部ArticleTags数组有一个对象列表。同样,我为每个父Array都有多个ArticleTags数组。我想从整个列表ArticleTags数组中检索唯一元素。我认为它检索特定内部列表中的唯一元素,而不是从整个文章标签列表中检索。
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
const uniqueArray = value.filter(function (el, index, array) {
return array.indexOf (el) === index;
});
return uniqueArray;
}
}
<ul>
<li *ngFor="let articlesResult of articlesListArray; let i=index">
<ul>
<li *ngFor="let articlesTagResult of articlesResult.ArticleTags | filterUnique; let j=index">
<i class="fa fa-times-circle" *ngIf="articlesResult.ArticleTags[j].value"></i>
<label class="form-check-label" for="exampleCheck" *ngIf="articlesResult.ArticleTags[j].value">{{articlesResult.ArticleTags[j].value}}</label>
</li>
</ul>
</li>
</ul>
getLatestArticles(currdate): void {
this.ng4LoadingSpinnerService.show();
this.ArticlesServiceCall.getArticlesDashboard(currdate)
.subscribe(
resultArray => {
this.ng4LoadingSpinnerService.hide();
this.articlesList = resultArray;
this.articlesLists = resultArray.ResponseValue;
this.articlesListArray = this.articlesLists.slice(0, 8);
},
error => console.log('Error :: ' + error)
);
}
我从articlesListArray获取主数组数据并在html中传递
2018年7月9日编辑更新
使用以下管道代码获取以下错误。
从&#39; @ angular / core&#39;中导入{Pipe,PipeTransform};
@Pipe({ 名称:&#39; filterduplicates&#39; }) export class FilterduplicatesPipe实现PipeTransform {
transform(value: any, args?: any): any {
// Remove the duplicate elements
const art = value.map( x => {
return x.ArticleTags ? x.ArticleTags.map(y => {
return y.value ? y.value : null;
}) : [];
}).reduce((acc, ele, i) => {
acc = acc.concat(ele);
return acc;
}).filter( z => {
if (z) {
return z;
}
});
return new Set(art);
}
答案 0 :(得分:1)
参考这个,给出了独特的过滤器 https://www.npmjs.com/package/ng2-pipes
ex: array | unique: 'Property (Optional)'
this.items = [1, 2, 3, 1, 2, 3];
<li *ngFor="let item of items | unique"> <!-- Array: [1, 2, 3] -->
答案 1 :(得分:1)
假设你的文章[]是这样的:
data('v', text)
管道上面的返回一组包含articletag值的字符串。
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);
}
}
答案 2 :(得分:0)
首先导入模块
`import { FilterPipe} from 'your-custom-pipe-path';`
然后您应该在
中注入自定义管道@NgModule({
declarations: [
FilterPipe
]
})
其余代码很好。 希望这会对你有所帮助。