如何在<>和<p列>中用图标标记值中的角6+？
如何在<>和<p列>中用图标标记值中的角6+？
提问于 2019-12-05 08:34:12
我有一个数组来自java后端到我的角6前端(使用p und p列标记来显示它)。
数组字段的名称为：“”、“1”、“2”。字段“2”有一个字符(“E”或“D”-表示已启用/禁用)。
我的问题是：
在我的实现中(参见下面)，是否可以用绿色检查图标(方框)替换 'E‘，用红色X图标替换'F’(但我想使用possible和p列标记)？
我的代码是：
<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('....'),
},
];和incomming请求的结构图片： 什么是从后端开始
非常感谢您有帮助的答案！
回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-05 10:06:46
在这种情况下，您可以传递标题和正文所需的模板，在这种情况下，您可以完全控制要如何显示值。
<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，有一个与datatable相关的旧组件，名为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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59191081
复制相关文章
相似问题
腾讯云开发者
