Ajout d'un filtre sous chaque colonne pour mat-table

Dec 16 2020

Je suis tombé sur un Stackblitz d'une autre réponse StackOverflow et je voulais voir si je pouvais ajouter un filtre à la table parent pour chaque colonne.

Voici mon Stackblitz que j'ai essayé et c'était le plus proche que je pouvais obtenir (veuillez ignorer le CSS / style). J'ai giflé un filtre d'entrée sous les colonnes. (Notez que je n'ai pas implémenté le filtre de travail lui-même dans le fichier .ts) Je remarque cependant quelque chose d'intéressant, que le bouton pour trier la colonne elle-même est enveloppé non seulement du nom de l'en-tête / colonne, mais du filtre lui-même - Ainsi, lorsqu'un utilisateur clique sur le filtre pour se concentrer sur le champ, il déclenche également un tri.

J'ai essayé d'ajouter le mat-form-fieldbloc entier ci-dessous des thbalises / header et cela ne fonctionne même pas ou n'apparaît pas. Je suis perdu ici et je n'arrive pas à comprendre comment placer les filtres ci-dessous sans les avoir enveloppés dans un bouton de tri.

Réponses

1 blazebot7000 Dec 16 2020 at 01:40

Si vous souhaitez empêcher le clic sur le bouton de tri lorsque vous cliquez sur le champ de saisie, vous pouvez essayer d'ajouter (click)="$event.stopPropagation();"au champ de saisie. Il est également possible que vous deviez ajouter cela aux événements (mouseup)ou (mousedown)au lieu de l' (click)événement.