【问题标题】:Angular6 Dynamic Array Filter ( TypeScript )Angular6 动态数组过滤器(TypeScript)
【发布时间】:2019-08-11 06:07:38
【问题描述】:

我有一个关于动态过滤数组的问题。我制作了一个表格,我有不同的过滤选项。例如 ;只有选定的列过滤器,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())); }

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

【问题讨论】:

    标签: arrays angular typescript dynamic filter


    【解决方案1】:

    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

    【讨论】:

      【解决方案2】:

      这是我通过多个输入进行过滤的示例:

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

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

      【讨论】:

      • 感谢您的回答,但这个回答对我没有帮助。当我找到不同的解决方案时,我会在这里分享
      猜你喜欢
      • 2020-06-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-06-08
      • 1970-01-01
      • 2020-01-22
      • 2017-05-04
      • 2023-03-04
      相关资源
      最近更新 更多