Angular中如何根据对象属性值渲染不同的自定义展示内容？

该需求完全可以实现，核心逻辑是建立状态枚举值和自定义展示文本的映射关系，以下是几种常用实现方案：

方案1：模板内条件判断（适合状态数量≤3的简单场景） #

直接在插值表达式内写三元判断即可：

<strong>
  {{ item.status === 'success' ? '执行成功' : item.status === 'error' ? '执行失败' : '待执行' }}
</strong>

方案2：预定义映射对象（最常用，易维护） #

在TS逻辑部分提前定义好状态和文本的映射表，模板直接查表取值，新增状态只要修改映射表即可：

// TS 逻辑部分定义映射
const STATUS_TEXT: Record<string, string> = {
  success: '执行成功',
  error: '执行失败',
  pending: '待执行',
  auditing: '审核中'
}

模板调用：

<!-- 加兜底逻辑，未匹配到的状态直接展示原始值避免空白 -->
<strong>{{ STATUS_TEXT[item.status] || item.status }}</strong>

搭配TS类型约束还可以避免写错状态值：

type StatusEnum = 'success' | 'error' | 'pending' | 'auditing'

interface ListItem {
  id: number
  status: StatusEnum
  // 其他属性
}

方案3：封装公共工具函数（适合多组件复用场景） #

如果多个组件都需要用到相同的状态转换逻辑，可以抽成公共函数全局复用：

// 单独抽离的工具函数
export function formatStatusText(status: string): string {
  const statusMap = {
    success: '执行成功',
    error: '执行失败',
    pending: '待执行'
  }
  return statusMap[status as keyof typeof statusMap] ?? status
}

模板中直接调用函数：

<strong>{{ formatStatusText(item.status) }}</strong>

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