Angular 过滤角度材质表中的特定列，并过滤角度？

我正在使用。它有一个工作正常的过滤器

针对以下数据进行筛选（所有列）

但现在我正试图更改过滤器，因为我只想为

“位置”、“名称”、“符号”

列设置过滤器。我已经看过这个例子了，但是

我不明白，请帮我一下

---

您必须覆盖数据源的

filterPredicate

下面是一个如何执行此操作的示例：

---

基本上，您希望在数据中指定应用过滤器的属性：

this.dataSource.filterPredicate = function(data, filter: string): boolean {
    return data.name.toLowerCase().includes(filter) || data.symbol.toLowerCase().includes(filter) || data.position.toString().includes(filter);
};

---

添加到bugs的答案中。这里有一个更详细的实现

导出类FilterTable在ViewInit之后实现{
//一些数据源
数据源//=
displayedColumns/=插入要在其上筛选是否显示但存在于数据源中的列名
//将筛选器应用于数据源
applyFilter（filterValue:string）{
this.datasource.filter=filterValue；
}
ngAfterViewInit（）{
//在这里覆盖filterPredicate，因为它需要在加载数据源后完成。
this.datasource.filterPredicate=（数据，过滤器）=>{
var-tot=false；
for（此.displayedColumns的let列）{
//如果存在日期类型，并且使用管道以不同方式显示，则在过滤之前将其转换为所需格式
//检查您正在筛选的所有列是否实际存在
if（（数据中的列）&&（新日期（数据[column].toString（））.toString（）=“无效日期”））{
//如果不是日期列
tot=（tot | | data[column].toString（）.trim（）.toLowerCase（）.indexOf（filter.trim（）.toLowerCase（））！=-1）；
}否则{
//将此更改为显示日期的格式
var date=新日期（数据[列].toString（））；
var m=date.toDateString（）.slice（4,7）+''+date.getDate（）+''+date.getFullYear（）；
tot=（tot | | m.toLowerCase（）.indexOf（filter.trim（）.toLowerCase（））！=-1）；
}
}
返回tot；
}
}
}

---

请随时提出编辑建议，如果这可以改进

材料已经实现了自己的搜索功能，您可以通过更新日期源上的filterPredicate属性来覆盖它。在ngOninit（）生命周期上调用generateTable函数

generateTable(tableData: any) {
    this.dataSource = new MatTableDataSource(tableData);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.dataSource.filterPredicate = (data: any, filter: string) => {
      console.log(data);
      console.log(filter);
      let matchFound = false;
      for (let column of this.displayedColumns) {
        if(column in data) {
          if(data[column]) {
            matchFound = (matchFound || data[column].toString().trim().toLowerCase().indexOf(filter.trim().toLowerCase()) !== -1)
          }
        }
      }
      return matchFound;
    }
  }

每当您希望应用过滤器时，都要将dataSource上的filter属性更新为要搜索的字符串值

applyFilter(searchValue: any) {
    this.dataSource.filter = this.filterText.trim().toLowerCase();
    }

---

在角度材质表中，我们可以从数据本身创建基于列的过滤器

来源

演示

为此，我们需要使用customFilter（）方法覆盖filterPredicate方法

        ...
        ngOnInit() {
            this.getRemoteData();

            // Overrride default filter behaviour of Material Datatable
            this.dataSource.filterPredicate = this.createFilter();
        }
        ...

        // Custom filter method fot Angular Material Datatable
        createFilter() {
            let filterFunction = function (data: any, filter: string): boolean {
            let searchTerms = JSON.parse(filter);
            let isFilterSet = false;
            for (const col in searchTerms) {
                if (searchTerms[col].toString() !== '') {
                isFilterSet = true;
                } else {
                delete searchTerms[col];
                }
            }

            let nameSearch = () => {
                let found = false;
                if (isFilterSet) {
                for (const col in searchTerms) {
                    searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
                    if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
                        found = true
                    }
                    });
                }
                return found
                } else {
                return true;
                }
            }
            return nameSearch()
            }
            return filterFunction
        }

---

检查完整的工作代码

只是为了澄清，如果元素的位置是

11209

，并且用户在

112

中键入，是否要显示该元素？位置不是筛选。如果元素的位置是11209，并且用户在112中键入yes，则需要显示我们也可以有一个动态include语句，因为有时显示的列数可能在20-30左右，就像在我的例子中，您的代码未编译：Uncaught SyntaxError:Unexpected token export我编写代码以供参考。我已经做了更改，请再次检查{“消息”：“未捕获的语法错误：意外的令牌导出”，“文件名”：“lineno”：13，“colno”：9}。很抱歉，这不是一个代码段，它只是一个示例代码，因此您可以运行该代码段。我改了。谢谢

        ...
        ngOnInit() {
            this.getRemoteData();

            // Overrride default filter behaviour of Material Datatable
            this.dataSource.filterPredicate = this.createFilter();
        }
        ...

        // Custom filter method fot Angular Material Datatable
        createFilter() {
            let filterFunction = function (data: any, filter: string): boolean {
            let searchTerms = JSON.parse(filter);
            let isFilterSet = false;
            for (const col in searchTerms) {
                if (searchTerms[col].toString() !== '') {
                isFilterSet = true;
                } else {
                delete searchTerms[col];
                }
            }

            let nameSearch = () => {
                let found = false;
                if (isFilterSet) {
                for (const col in searchTerms) {
                    searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
                    if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
                        found = true
                    }
                    });
                }
                return found
                } else {
                return true;
                }
            }
            return nameSearch()
            }
            return filterFunction
        }