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

问题描述

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

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/带芯片角材料过滤器

在添加术语(例如，通过按Enter键添加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);)将过滤器再次应用到dataSource上，但是结果不会更新.

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.

我已尝试按照建议的此处和

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

任何建议都将不胜感激！

Any suggestions are much appreciated!

推荐答案

您应该在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屋！