角度材料表自定义过滤器添加和删除多个术语 [英] Angular Material Table Custom Filter Adding and Removing Multiple Terms

问题描述

我正在使用 Angular 的 material-ui 表和 material-chips 实现自定义过滤器，其中涉及能够通过匹配多个关键字来搜索数据.用户应该能够添加关键字并且表格应该过滤适当的匹配项，并且用户应该能够删除任何关键字并且表格应该在删除关键字后显示适当的匹配

I am implementing a custom filter using Angular's material-ui table and material-chips that involves being able to search data via match on multiple keywords. The user should be able to add keywords and the table should filter appropriate matches, and the user should be able to remove any keywords as well and the table should display appropriate matches after deleting keywords

这是当前的实现:https://stackblitz.com/edit/带芯片的角度材料过滤器

过滤在添加术语时起作用，例如按回车键添加 data 然后添加 science 过滤器到一门课程，但删除 science 应该返回两门课程，因为只有 data 保留为关键字.

The filtering works when adding terms e.g. add data by pressing enter then add science filters down to one course, but removing science should return to two courses since only data remains as a keyword.

删除关键字后，我只是尝试使用剩余的搜索词再次对数据源应用过滤器 (this.dataSource.filter = JSON.stringify(this.searchTerms);) 但结果不更新.

After removing a keyword, I simply try to apply the filter on the dataSource again with the remaining search terms (this.dataSource.filter = JSON.stringify(this.searchTerms);) but the results do not update.

我发现类似问题，其中数据表没有被重新- 在一些更新后正确呈现，他们建议重置 dataSource.data 以触发对所有课程的新搜索.

I've found similar issues where the data-table is not being re-rendered properly after some update and they suggested resetting dataSource.data to trigger a new search on all the courses.

我已经尝试按照建议创建这个干净的参考此处，此处 和here 但在这种情况下它们似乎不起作用.

I've tried creating this clean reference as suggested here, here and here but they don't seem to work in this case.

非常感谢任何建议！

推荐答案

您应该在 add 方法中重置 globalFilter ，否则您会将最后插入的值与芯片值一起过滤.

You should reset globalFilter inside your add method, otherwise you will filter the last inserted value together with the chip values.

您可以在 add 方法中将其设置为空字符串，如下所示:

You may set it to an empty string on your add method as bellow:

add(event: MatChipInputEvent): void {
  // ...
  this.globalFilter = '';
}

这篇关于角度材料表自定义过滤器添加和删除多个术语的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！