Angular中如何根据状态动态修改ngbTooltip的提示文本值

错误原因 #

你原有写法的问题有两点：

• 未使用Angular输入属性绑定语法：直接写ngbTooltip="xxx"会将引号内的内容作为静态字符串传递给指令，不会解析Angular表达式，必须加[]改成[ngbTooltip]才会执行后方的表达式计算
• 表达式返回值不符合要求：ngbTooltip需要接收字符串类型的提示内容，你写的对象结构会返回布尔值，无法作为提示文本展示

正确实现方案 #

方案1：模板内直接写三元表达式（适合简单状态判断） #

直接通过三元运算符返回对应状态的提示文本：

<button mat-stroked-button type="button" class="action-btn"
        [ngbTooltip]="element.checkinStatus === 'pending' ? 'PENDING' : 'APPROVED'"
        (click)="editCheckIn('edit',element)">
  <i class="fas fa-pencil-alt"></i>
</button>

如果后续状态扩展，也可以用对象映射的写法，更简洁：

<button mat-stroked-button type="button" class="action-btn"
        [ngbTooltip]="{pending:'PENDING',approved:'APPROVED'}[element.checkinStatus]"
        (click)="editCheckIn('edit',element)">
  <i class="fas fa-pencil-alt"></i>
</button>

方案2：封装为组件方法（适合复杂逻辑、多状态场景） #

先在组件的.ts文件中定义获取提示文本的方法：

getCheckInTooltip(status: string): string {
  // 可根据业务需求自定义对应文本，也可扩展更多状态分支
  const statusMap = {
    pending: '待审核',
    approved: '已通过'
  }
  return statusMap[status] || ''
}

再在模板中调用该方法即可：

<button mat-stroked-button type="button" class="action-btn"
        [ngbTooltip]="getCheckInTooltip(element.checkinStatus)"
        (click)="editCheckIn('edit',element)">
  <i class="fas fa-pencil-alt"></i>
</button>

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