Angular环境下HTML表格根据布尔值修改单元格显示文本问题咨询

这个需求仅通过修改HTML模板即可实现，不需要改动Angular组件逻辑，是目前最简单的实现方式。

实现方法 #

你只需要修改State列的插值表达式，用Angular模板支持的三元运算符做判断即可：
把原来的

<td>{{bug.state}}</td>

替换为

<td>{{ bug.state ? 'open' : 'closed' }}</td>

当bug.state为true时会自动展示open，为false时展示closed，完全符合你的需求。

其他可选方案（适合多场景复用） #

如果你的项目里有多处需要把布尔类型的状态转换成open/closed文本，也可以选择下面两种更易维护的方案，这两种需要修改组件/公共模块代码：

• 在组件类中新增转换方法
  组件ts文件中新增方法：

  getStateText(state: boolean): string {
    return state ? 'open' : 'closed';
  }
  

  模板中调用：

  <td>{{ getStateText(bug.state) }}</td>
  

• 封装全局纯管道（适合全项目复用）
  封装一个布尔转状态文本的公共管道，全项目所有模板都可以直接调用，不需要每个组件重复写转换逻辑。

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