角材料表自定义过滤器添加和删除多个术语

Question

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

应该显示适当的匹配项

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

添加术语（例如，通过按Enter键添加data，然后将science个过滤器添加到一个课程，但是删除science应该返回到两个课程，因为只有data作为关键字。

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

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

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

任何建议都非常感谢！

Answer 1

您应该在add方法中重置globalFilter，否则将过滤最后插入的值和码片值。

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

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