我正在使用 Angular 的material-ui 表和material-chip 实现自定义过滤器，其中涉及能够通过多个关键字的匹配来搜索数据。用户应该能够添加关键字，并且表格应该过滤适当的匹配项，并且用户还应该能够删除任何关键字，并且表格应该显示适当的匹配项删除关键词后
这是当前的实现：https://stackblitz.com/edit/angular-material-filter-with-chips https://stackblitz.com/edit/angular-material-filter-with-chips
添加术语时过滤起作用，例如添加data按 Enter 键然后添加science过滤到一门课程，但删除science应该回到两门课程，因为只有data仍然作为关键字。
删除关键字后，我只需尝试使用剩余的搜索词再次在数据源上应用过滤器（this.dataSource.filter = JSON.stringify(this.searchTerms);）但结果不会更新。
我找到了类似问题 https://github.com/angular/material2/issues/12452某些更新后数据表未正确重新呈现，他们建议重置 dataSource.data 以触发对所有课程的新搜索。
我尝试按照建议创建这个干净的参考here https://stackoverflow.com/questions/50849044/angular-material-mat-table-is-not-showing-updated-data-from-data-source/50849163, here https://stackoverflow.com/questions/9885821/copying-of-an-array-of-objects-to-another-array-without-object-reference-in-java and here https://stackblitz.com/edit/angular-material-cancelable-table-nxlib5?file=app%2Fcomponent%2Ftable.component.ts但在这种情况下它们似乎不起作用。
非常感谢任何建议！
你应该重置globalFilter在您的 add 方法中，否则您将过滤最后插入的值以及芯片值。
您可以将其设置为空字符串add方法如下：
add(event: MatChipInputEvent): void {
// ...
this.globalFilter = '';
}
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
