Пользовательский фильтр таблицы угловых материалов Добавление и удаление нескольких терминов

Question

Я внедряю пользовательский фильтр, используя таблицу материалов и пользовательского интерфейса Angular, которая включает возможность поиска данных по совпадению по нескольким ключевым словам. Пользователь должен иметь возможность добавлять ключевые слова, и таблица должна фильтровать соответствующие совпадения, и пользователь должен иметь возможность также удалять любые ключевые слова, и таблица должна отображать соответствующие совпадения после удаления ключевых слов

Вот текущая реализация: https://stackblitz.com/edit/angular-material-filter-with-chips

Фильтрация работает при добавлении терминов, например добавьте data, нажав Enter, затем добавьте фильтры science к одному курсу, но удаление science должно вернуться к двум курсам, поскольку в качестве ключевого слова остается только data.

После удаления ключевого слова я просто пытаюсь снова применить фильтр к источнику данных с оставшимися поисковыми терминами (this.dataSource.filter = JSON.stringify(this.searchTerms);), но результаты не обновляются.

Я обнаружил похожие проблемы , когда таблица данных не обновляется должным образом после некоторого обновления, и они предложили сбросить dataSource.data, чтобы запустить новый поиск по всем курсам.

Я пытался создать эту чистую ссылку, как предлагалось здесь , здесь и здесь , но, похоже, в этом случае они не работают.

Любые предложения приветствуются!

Answer 1

Вам следует сбросить globalFilter в вашем методе добавления, иначе вы отфильтруете последнее добавленное значение вместе со значениями чипа.

Вы можете установить пустую строку в вашем методе add, как показано ниже:

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