Angular Material Table Custom Filter Adding and Re

问题:

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

Here's the current implementation: https://stackblitz.com/edit/angular-material-filter-with-chips

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.

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.

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!

回答1:

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

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

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