Добавление фильтра под каждый столбец для mat-table

Dec 16 2020

Я наткнулся на Stackblitz из другого ответа StackOverflow и хотел посмотреть, могу ли я добавить фильтр в родительскую таблицу для каждого столбца.

Вот мой Stackblitz, который я пробовал, и это было самое близкое, что я мог найти (пожалуйста, не обращайте внимания на CSS / стили). Я вставил входной фильтр под колонки. (Обратите внимание, что я не реализовал сам фактический рабочий фильтр в файле .ts.) Я замечаю кое-что интересное, что кнопка для сортировки самого столбца обернута не только именем заголовка / столбца, но и самим фильтром - поэтому, когда пользователь нажимает на фильтр, чтобы сфокусироваться на поле, он также запускает сортировку.

Я попытался добавить весь mat-form-fieldблок ниже thтегов / header, но он даже не работает и не отображается. Я здесь в растерянности и, кажется, не могу понять, как разместить фильтры ниже, не завернув их в кнопку сортировки.

Ответы

1 blazebot7000 Dec 16 2020 at 01:40

Если вы хотите предотвратить нажатие кнопки сортировки при нажатии на поле ввода, вы можете попробовать добавить (click)="$event.stopPropagation();"в поле ввода. Также возможно, что вам может потребоваться добавить это к событиям (mouseup)или (mousedown)вместо (click)события.