Question

我想显示fa-gift图标（http://fontawesome.io/icon/gift/）如果icon = true来自对象columnList，否则显示一个空列

这是我的数据;我正在使用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 ojbject在typescript文件中定义如下：

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
}

Answer 1

你可以试试这个。

            <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>

这是工作插件的例子。 https://plnkr.co/edit/qPt4nRFytTuPCouem1oz?p=preview

在p列中显示图标

1 个答案: