Question

我在角度2中做了这个管道，根据一些标准过滤了一个数组：

Access-Control-Allow-Origin

这是html页面，我使用过滤器只显示以字母e开头的值：

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'filter',
  pure: false
})
export class FilterPipe implements PipeTransform {

  transform(value: any, args?: any): any {
    if(value.length === null){
        return value;
    }

    let resultArray = [];
    for(let item of value)
    {
        if(item.match('^.*'+args[0]+'.*$'))
        {
            resultArray.push(item);
        }
    }
    return resultArray;
  }

}

onClick（）方法由以下脚本表示：

<input type="text" [(ngModel)]="val">
<hr>
<button type="button" class="btn btn-primary" (click)="onClick(val)">Add Item</button>
<hr>
<h1>
  <li *ngFor="let item of values | filter: 'e'">{{item}}</li>
</h1>

我想在过滤器中添加一个条件，以查看数组中是否存在现有值，即使它以字母e开头，也不会将其添加到数组中。

我在onClick（）方法中尝试了以下操作，但它没有工作且没有显示错误：

export class AppComponent {
  title = 'app works!';
  values=['east', 'middle east'];

  onClick(val)
  {
    // if(val==null)
    // {
    //  return null;
    // }
    // val=this.values.indexOf(values)
    this.values.push(val);

    //this.values.push(val);
    //console.log(val)
  }

所以我在管道中添加了以下内容：

onClick(val)
  {
    if(val==null)
    {
        return null;
    }
    else{
        if(val==this.values.indexOf(this.values))
        {
            return null;
        }
        else
        {
            this.values.push(val);
        }
    }

仍然没有错误地工作。

Answer 1

在您的管道中，您可以过滤数组中的唯一元素并删除重复项：

let uniqueArray = value.filter(function (el, index, array) { 
    return array.indexOf (el) == index;
});

然后你可以捕获以特定字符串开头的这些元素：

for (let item of uniqueArray) {
    if (item.match("^"+args[0])) {
        resultArray.push(item);
    }
}

我创建了一个工作示例：https://plnkr.co/edit/zqhFlTmp5YxABf4LVNUV?p=preview

您可以看到您的真实数据和过滤后的数据。

Angular 2管道检查数组中是否已存在值

1 个答案: