web-dev-qa-db-fra.com

Comment utiliser le modèle dans <p-datatable>

J'ai une question très basique à laquelle je ne peux pas répondre moi-même car la plupart des liens vers http://www.primefaces.org/primeng ne fonctionnent plus. J'ai aussi essayé de m'inscrire sur leur forum mais leur mail d'activation n'arrive jamais.

J'utilise Angular2 et j'ai une table de données avec deux colonnes: nom de fichier et statut. La colonne d'état que je souhaite modifier. Il contient maintenant un nombre de 1 à 4 et je veux montrer un glyphicon basé sur le statut.

J'ai maintenant ceci, qui fonctionne:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single"  sortField="Status" [sortOrder]="-1">
  <p-column field="FileName" header="Naam" sortable="true"></p-column>
  <p-column field="Status" header="Status" sortable="true"></p-column>
</p-dataTable>

J'ai essayé cela, juste pour tester les modèles mais rien ne change:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single"  sortField="Status" [sortOrder]="-1">
  <p-column field="FileName" header="Naam" sortable="true"></p-column>
  <p-column field="Status" header="Status" sortable="true">
    <template let-file="rowData">
        {{file.Status == 1 ? "Yes" : "No"}}
    </template>
  </p-column>
</p-dataTable>

Économisez donc pour conclure que je ne l'utilise pas correctement.

Nous utilisons PrimeNG 1.0.0-beta.16

angulardatatableangular2-templateprimeng
8
Paul Meems

Chaque p-column peut avoir deux modèles - body et header, vous devez spécifier de quel modèle il s'agit. Ce n'est pas obligatoire car body est par défaut je pense et c'est ce dont vous avez besoin dans ce cas, mais c'est une bonne pratique. Vous devez également ajouter pTemplate au modèle pour que p-column pour l'utiliser, c'est la raison p-column n'affichera pas le modèle que vous avez fourni. Ainsi, votre code devrait ressembler à ceci:

<p-dataTable [hidden]="loading" [value]="files" selectionMode="single" sortField="Status" [sortOrder]="-1">
  <p-column field="FileName" header="Naam" sortable="true"></p-column>
  <p-column field="Status" header="Status" sortable="true">
    <ng-template let-file="rowData" pTemplate type="body">
        {{file.Status == 1 ? "Yes" : "No"}}
    </ng-template>
  </p-column>
</p-dataTable>
18
Stefan Svrkota