Angular6 动态数组过滤器 (TypeScript)

Question

I have a question about dynamicly filter array.. I making a table and I have different filtering options. For example ; Only selected column filter, MultiSelect dropdown menu filter and ı want filter multiple columns . my table

For Example ; Write a filter word in Brand filter. This code line is filtered my data. (veri = data. (in Turkish) ).

    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())); }

I want to filter the filtered data by year but is not working. And I have a more problem. We were suppose filtered Brand and Year. if the filter word we wrote is in the array, update my array and display into table. OK. No problem. We select colors in dropdown menu. After we want filter by colors ( White and Green ). How we make do this? I don't know how many data will come to filter. in this point we need to dynamic filter. Please help me. thank you..

Answer 1

here is my example for filtering by many inputs:

  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();
    }
  }

Variable Filter is array of string.

Answer 2

x[colName] should work.

@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);
    }
  }
}

I created a pipe in which list is filtered and it works. This is in angular 6