在 p 列中显示图标
Display icon within p-column
如果对象 columnList 中的 icon = true,我想显示 fa-gift 图标 (http://fontawesome.io/icon/gift/),否则显示一个空列
这是我的数据表;我正在使用 primeNG 和 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>
columnList 对象在打字稿文件中定义如下:
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
}
你可以试试这个。
<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>
这是有效的 plunkr 示例。 https://plnkr.co/edit/qPt4nRFytTuPCouem1oz?p=preview
如果对象 columnList 中的 icon = true,我想显示 fa-gift 图标 (http://fontawesome.io/icon/gift/),否则显示一个空列
这是我的数据表;我正在使用 primeNG 和 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>
columnList 对象在打字稿文件中定义如下:
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
}
你可以试试这个。
<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>
这是有效的 plunkr 示例。 https://plnkr.co/edit/qPt4nRFytTuPCouem1oz?p=preview