Question

我在一个表中显示一个JSON数据，每个列有3列和下拉列表。我有一个写入管道来使用select下拉列表来过滤数据。我有3列，我写了3个独立的管道，我试图使用单个管道过滤3列

以下是我写的代码：

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

@Pipe({
  name: 'filterNames',
  pure: false
})
export class FilterNamesPipe implements PipeTransform {
  transform(items: any, query1: any,query2:any,query3): string {
    if (!query1 || query2 || query3) return items;
    return items.filter(function(item){
      if(item.firstName.includes(query1) || item.lastname.includes(query2) || item.middleName(query3)){
        return true;
      }
      else {
        return false;
      }
    })
  }
}

Items变量具有JSON数据，query1，query2 query3是3个不同dropDowns中的值。当我使用query1或query2或query3过滤列时，数据过滤工作正常，但当我在另一个过滤器上过滤时，第一个应用的过滤器数据正在发生变化。

Answer 1

我不会用烟斗做的。我认为最好在模板中的选择下拉列表中附加（更改）事件监听器之类的内容，如下所示：

<select name="firstNameFilter" id="1" (change)="onFilter('firstName', $event.target.value)"></select>

<select name="lastnameFilter" id="2" (change)="onFilter('lastname', $event.target.value)"></select>

<select name="middleNameFilter" id="3" (change)="onFilter('middleName', $event.target.value)"></select>

然后在ts文件中创建一个onFilter方法，它将过滤您的JSON数据：

onFilter(property: string, value: string) {
  // filter the data
}

可以使用Array.prototype.filter()方法完成过滤本身，该方法将返回一个新的对象数组。

使用角度为

1 个答案: