Angular6动态数组过滤器(TypeScript)

时间:2019-03-20 14:03:08

标签: arrays angular typescript dynamic filter

我有一个关于动态过滤器数组的问题。我制作了一个表,并且有不同的过滤选项。例如 ;仅选择列过滤器,MultiSelect下拉菜单过滤器和ı要过滤多列。 my table

例如; 在品牌过滤器中写一个过滤词。此代码行已过滤我的数据。 (veri =数据。(土耳其语))。

    public filter(str, i) {

      const collName = this.bizimKolon[i].Baslik; // Column Name
      this.veri = this.yedekVeri.filter(x => x[collName].toString().toLowerCase().includes(str.toLowerCase())); }

我想按年份过滤已过滤的数据,但是不起作用。我还有一个问题。我们假设过滤了品牌和年份。如果我们写的过滤词在数组中,请更新我的数组并显示到表中。好。没问题。我们在下拉菜单中选择颜色。之后我们要按颜色(白色和绿色)进行过滤。我们如何做到这一点?我不知道要过滤多少数据。在这一点上,我们需要动态过滤。请帮我。谢谢。

2 个答案:

答案 0 :(得分:0)

这是我的许多输入过滤示例:

  applyFilter() {
    let custs = this.ch.customers.filter((cust: Customer) => {
      return  (
          ((cust.name.toLowerCase().trim().indexOf(this.filters[0]) !== -1) || (!this.filters[0])) &&
          ((!this.filters[5]) || (cust.user.username.toLowerCase().trim().indexOf(this.filters[5]) !== -1)) &&
          ((!this.filters[2]) || (cust.state.name.toLowerCase().trim().indexOf(this.filters[2]) !== -1)) &&
          ((!this.filters[1]) || (cust.description.toLowerCase().trim().indexOf(this.filters[1]) !== -1)) &&
          ((!this.filters[3]) || (cust.last_mess.toLowerCase().trim().indexOf(this.filters[3]) !== -1))
      );
    });

    this.dataSource.data = custs;
    this.ch.customers_filter = this.dataSource.data;
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

变量过滤器是字符串数组。

答案 1 :(得分:0)

x[colName] 应该可以工作。

@Pipe({name: 'dataListFilterPipe'})
export class DataListFilterPipe implements PipeTransform {
  transform(data: any, col: string, value: string): any {
    if (data !== undefined) {
      return data.filter(x => x[col] == value);
    }
  }
}

我创建了一个管道,在其中过滤了列表并且可以正常工作。这是角度 6