Angular Material Table 自定义过滤器添加和删除多个术语答案

【问题标题】：Angular Material Table Custom Filter Adding and Removing Multiple TermsAngular Material Table 自定义过滤器添加和删除多个术语
【发布时间】：2019-09-04 05:03:16
【问题描述】：

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

这是当前的实现：https://stackblitz.com/edit/angular-material-filter-with-chips

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

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

我发现 similar issues 在某些更新后未正确重新呈现数据表，他们建议重置 dataSource.data 以触发对所有课程的新搜索。

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

非常感谢任何建议！

【问题讨论】：

添加了 2 个标签，然后删除了一个 - 然后我进入输入，按下一个键，然后按下退格按钮......整个数据集按预期变为可用；您已正确表明 dataSource 具有正确的数据，但在我添加然后从输入中删除一个字符之前，结果并没有“刷新”

标签： angular filter angular-material

【解决方案1】：

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

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

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

【讨论】：