我如何在 Angular 6+ 中替換<p-dataTable>和<p-column>用圖標標記一個值？

Question

我有一個從 java 后端到我的 Angular 6 前端的數組（使用p-dataTable和p-column標記來顯示它）。


Array 的字段名稱為：“ 0 ”、“ 1 ”、“ 2 ”。 字段 '2' 有 1 個字符（' E ' 或 ' D ' - 表示啟用/禁用）。

我的問題是：
在我的實現中（見下文）是否可以用綠色復選圖標（fontawesome）替換“ E ”，用紅色 X圖標替換“F”（但我想使用 p-dataTable 和 p-column 標簽）？

我的代碼是：

<p-dataTable *ngIf="!loading && hasEntries"
           [value]="list"
           [(selection)]="selectedRowData"
           (onRowSelect)="onRowSelect($event)"
           [selectionMode]="selectionMode">

<p-column *ngFor="let col of columns"
          [field]="col.field"
          [header]="col.header"
          [sortable]="true">
</p-column>

我想用字符（'E' 和 'F'）替換的圖標代碼是：

<i class="fa fa-check" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>

列的定義：

  this.columns = [
  {
    field: '10',
    header: this.translationService.getTranslation('...')
  },
  {
    field: '9',
    header: this.translationService.getTranslation('...')
  },
  {
    field: '11',
    header: this.translationService.getTranslation('...')
  },
  {
    field: '7',
    header: this.translationService.getTranslation('....')
  },
  {
    field: '5',
    header: this.translationService.getTranslation('....'),
  },
];

以及傳入請求的結構圖： What is來自后端

非常感謝您提供有用的答案！

Answer 1

在這種情況下，您可以傳遞標題和正文所需的模板，您可以完全控制如何顯示值

<p-dataTable *ngIf="!loading && hasEntries"
           [value]="list"
           [(selection)]="selectedRowData"
           (onRowSelect)="onRowSelect($event)"
           [selectionMode]="selectionMode">

  <ng-template pTemplate="body" let-rowData let-columns="columns">
    <tr>
       <td *ngFor="let col of columns">
             <ng-container *ngIf="col.field === '2'; else other">
                     <i class="fa" 
                      [ngClass]="{'fa-check' : rowData[col.field] =='E' , 'fa-times :rowData[col.field] =='F'  ]}" aria-hidden="true"></i>
              <ng-template #other>
                   {{rowData[col.field]}}
              </ng-template>
        </ng-container>
        </td>
       </tr>
   </ng-template>       

<p-dataTable>

更新！！ 🔥🔥

對於primeng verion 4，有一個與數據表相關的舊組件，稱為p-dataTable

<p-dataTable *ngIf="!loading && hasEntries"
           [value]="list"
           [(selection)]="selectedRowData"
           (onRowSelect)="onRowSelect($event)"
           [selectionMode]="selectionMode">

<p-column *ngFor="let col of columns" [header]="col.header" [sortable]="true">
    <ng-template pTemplate="body" let-data="rowData">
        <ng-container *ngIf="col.field === '2'; else other">
            <i class="fa"
             [ngClass]="{'fa-check' : data[col.field] =='E' ,'fa-times' : data[col.field] =='F' }" aria-hidden="true"></i>
        </ng-container>
        <ng-template #other>
            {{data[col.field]}}
        </ng-template>
    </ng-template>
</p-column>

<p-dataTable>

👉演示🔥🔥