如何在Angular PrimeNG p-table组件布尔值列显示勾选图标

下面提供3种对共享组件侵入性从低到高的实现方案，可根据项目实际情况选择：

方案1：利用现有isHtml配置预处理行数据（无需修改共享组件） #

你现有列配置中已经存在isHtml字段，说明共享组件已支持渲染HTML内容，无需任何组件修改即可实现：

1. 修改Back Order列的配置，添加isHtml: true

{ field: 'isBackOrder', header:'Back Order', isHtml: true }

2. 拿到API返回的行数据后，批量预处理isBackOrder字段：

// 接口请求拿到数据后执行处理
this.rowData = apiResult.map(item => {
  return {
    ...item,
    isBackOrder: item.isBackOrder ? '<i class="pi pi-check"></i>' : ''
  }
})

注：这里用的是PrimeNG自带的图标类pi pi-check，如果你项目用其他图标库替换成对应类名即可

方案2：利用现有callback配置动态生成内容（无需修改共享组件、无需改动原始数据） #

你现有列配置中已支持callback回调字段，组件会自动用回调的返回值作为单元格显示内容，搭配isHtml即可实现：

1. 列配置添加回调和isHtml标记：

{ field: 'isBackOrder', header:'Back Order', isHtml: true, callback: this.renderBackOrderIcon }

2. 在当前组件添加回调方法：

renderBackOrderIcon = (value: boolean) => {
  return value ? '<i class="pi pi-check"></i>' : ''
}

方案3：对共享组件做最小兼容改动（后续其他布尔列可复用） #

如果后续其他页面也有类似布尔值显示对勾的需求，可以给共享组件加几行通用逻辑，侵入性极低：

1. 在standardTable.component.ts的单元格渲染逻辑中，新增isBoolean判断分支：

<!-- 只需要在原来的单元格渲染位置加这一段判断即可，不影响现有功能 -->
<ng-container *ngIf="col.isBoolean">
  <i *ngIf="rowData[col.field]" class="pi pi-check"></i>
</ng-container>

2. 你当前页面的列配置只需要加个isBoolean: true即可：

{ field: 'isBackOrder', header:'Back Order', isBoolean: true }

内容的提问来源于stack exchange，提问作者Shubham Tiwari