2017-07-10 2 views
0

Je veux représenter des valeurs booléennes sous la forme d'icônes pour un champ de colonne dans la table de données primeng. Voici un morceau de code:Représente des valeurs booléennes sous la forme de 2 icônes différentes (une pour true, une pour false) dans PrimeNG DataTable

<p-dataTable [value]="ARRAY_METADATA" rowHover="true"> 
    <p-column field="id" header="Field ID" [sortable]="true"></p-column> 
    <p-column field="booleanField" header="Boolean Field" [sortable]="true"></p-column> 
</datatable> 

Comment suis-je censé montrer peut-être un « Tick » pour les valeurs vraies et « croix » pour les valeurs fausses pour le BooleanField? Je suppose que le code ci-dessus fonctionne bien dans le cas de HTML pur. Mais encore une fois comment est-ce que je suppose mettre l'instruction conditionnelle pour produire deux icônes différentes pour différentes valeurs booléennes? Des pensées rapides?

J'ai essayé d'utiliser ngIf mais il n'affiche toujours pas la façon dont j'ai besoin. Il affiche simplement le contenu de ng-modèle:

<p-column field="someStringField" header="Some String Field"> 
    <div *ngIf="someStringField; else elseBlock"> 
     <button type="button" pButton icon="fa-check"></button> 
    </div> 
    <ng-template #elseBlock pTemplate="body" > 
     <button type="button" pButton icon="fa-times"></button> 
    </ng-template> 
</p-column> 
+0

see suggéré réponse ci-dessous – BillF

Répondre

0

Je crois que vous devez mettre tout contenu que vous voulez être visible dans la colonne à la ng-modèle

<ng-template let-col="rowData" pTemplate="body"> 
    <button *ngIf="col.someValue" type="button" pButton icon="fa-check"></button> 
    <button *ngIf="!col.someValue" type="button" pButton icon="fa-times"></button> 
</ng-template>