2017-11-19 1 views
-1

Ich will mich das fa-Geschenk-Symbol (http://fontawesome.io/icon/gift/), wenn Symbol = true angezeigt wird von dem Objekt column sonst eine leere Spalte angezeigtSymbol Anzeige in p-Spalte

Hier mein datatabe ist; Ich bin mit primeNG und Angular 4

<p-dataTable [(value)]="this.columnList" selectionMode="single" rows="25" [responsive]="true" [loading]="false" sortField="offeredDate"> 
      <p-header><div class="ui-helper-clearfix" style="width:100%"><span class="results-text" >Showing {{this.mccFilterPanelService.countResults }} results as of {{currentDate}} </span></div></p-header> 
      <p-column field="id" hidden="true"></p-column> 
      <p-column field="childName" header="Child" ></p-column>   
      <p-column field="programName" header="Program" ></p-column> 
      <p-column field="careOptionName" header="Care Options/Offerings" ></p-column> 
      <p-column field="offerStatus" header="Offer Status" ></p-column> 
      <p-column field="offeredDate" header="Offer Date" ></p-column> 
      <p-column field="careAvailableDate" header="Care Availability Date" ></p-column> 
      <p-column field="icon" header="Icon" >Display fa-icon if icon is true here</p-column>     

      </p-column> 
     </p-dataTable> 

die column ojbject in Typoskript-Datei definiert ist wie folgt:

export class ColumnList { 
    public id: number; 
    public name: string; 
    public description: string; 
    public icon: boolean; //this is the variable i want to use to determine when to show the icon 
} 

Antwort

1

du versuchen.

  <p-column field="icon" header="Icon" > 
       <ng-template let-rowdata="rowData" pTemplate="body"> 
         <i *ngIf="rowdata?.icon" class="fa fa-gift" aria-hidden="true"></i> 
       </ng-template> 
      </p-column>     

Hier funktioniert Plunkr Beispiel. https://plnkr.co/edit/qPt4nRFytTuPCouem1oz?p=preview

Verwandte Themen