2 votes

Comment utiliser Angular Material MatSort dans un tableau qui utilise un modèle pour l'en-tête ?

Je suis en train de créer un contrôle de tableau personnalisé qui sera réutilisable dans tout le projet. Je veux que ce tableau utilise MatSort en interne. Il doit également être flexible, c'est pourquoi j'utilise des modèles pour l'en-tête et le corps du texte.

Le problème est que je ne peux pas spécifier mat-sort-header sur un <th> à l'intérieur d'un modèle. Dans mon projet, cela ne fonctionne pas (la directive est ignorée). J'ai créé un stackblitz simplifié et là, la console affiche une erreur : MatSortHeader must be placed within a parent element with the MatSort directive .

Voici le Stackblitz

J'y ai mis le minimum de code pour montrer le problème. Ce que je veux obtenir est quelque chose comme ceci :

<my-templated-table>
  <ng-template #header>
    <tr>
      <th mat-sort-header="sortable">Sortable</th>
    </tr>
  </ng-template>
</my-templated-table>

Idéalement, j'aimerais même avoir une directive personnalisée pour l'en-tête de tri afin de pouvoir masquer MatSort syntaxe du consommateur.

J'ai essayé de trouver une solution pendant quelques heures maintenant et chaque fois que je trouve quelque chose d'assez similaire, il n'y a pas de réponse. J'ai également lu qu'une directive ne peut pas ajouter une autre directive au moment de l'exécution, donc je ne sais pas si mon approche idéale est possible. Bien que je se sentir que les deux devraient être...

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X