javascript - 在 Angular 6+ 中，如何用图标替换 和 标记中的值？

Question

我有一个从 java 后端到 Angular 6 前端的数组(使用 p-dataTable 和 p-column 标签来显示它)。


数组字段的名称为:“0”、“1”、“2”。字段“2”有 1 个字符(“E”或“D”- 表示启用/禁用)。

我的问题是:
在我的实现中(见下文)是否可以用绿色复选标记图标(fontawesome)和“F”替换“E”带有红色 X 图标(但我想使用 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 comming from the backend

非常感谢您的热心解答!

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

👉 demo 🔥🔥