Ajout d'un filtre sous chaque colonne pour mat-table
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-field
bloc entier ci-dessous des th
balises / 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
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.