首页 文章

使用Angular中的管道过滤器从数组中过滤唯一元素

提问于
浏览 次
1

enter image description here
我正在尝试使用Angular实现管道 . 以下是我尝试过的代码 . 我想检索完整列表的唯一 . 所以我为内部列表添加了一个管道过滤器名称 . 但我仍然得到重复的元素 . 我已经添加了json以供参考 . 内部ArticleTags数组有一个对象列表 . 同样，我为每个父Array都有多个ArticleTags数组 . 我想从整个列表ArticleTags数组中检索唯一元素 . 我认为它检索特定内部列表中的唯一元素，而不是从整个文章标签列表中检索 .

enter image description here

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中传递

Edit update on July 09 2018

使用以下管道代码获取以下错误 .

从'@ angular / core'导入{Pipe，PipeTransform};

@Pipe（{name：'filterduplicates'}）导出类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);
}

}
enter image description here

angular pipe

3 回答

  • 1

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

    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>
    回复于
  • 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] -->
    回复于
  • 0

    首先导入模块

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

    那你应该注入自定义管道

    @NgModule({
declarations: [
     FilterPipe
    ]
})

    其余的代码很好 . 希望这会帮助你 .

    回复于

相关问题