如何在Angular的ngStyle中应用布尔逻辑实现动态样式切换

首先先修正你代码里的几个语法问题：

• 变量名不能包含空格：single order 需改为 singleOrder
• [ngStyle] 的对象语法不完整，缺少开头的 {
• 模板标签内存在多余符号（<p> 里的 . 和结尾的 >），需要移除

以下是通过布尔函数实现需求的具体方案：

步骤1：在组件类中定义布尔判断函数 #

在你的组件 .ts 文件中添加两个用于判断状态的布尔函数，将判断逻辑抽离到组件中，便于维护和复用：

// 订单状态是否为CONFIRM
isOrderConfirmed(status: string): boolean {
  return status === 'CONFIRM';
}

// 订单状态是否为CANCELLED
isOrderCancelled(status: string): boolean {
  return status === 'CANCELLED';
}

步骤2：在模板中调用函数实现ngStyle绑定 #

修改你的模板 .html 文件，通过调用组件内的布尔函数来动态设置样式：

<div *ngFor="let singleOrder of order.order">
  <p [ngStyle]="{
    color: isOrderConfirmed(singleOrder.status) ? 'green' : (isOrderCancelled(singleOrder.status) ? 'red' : ''),
    background: isOrderConfirmed(singleOrder.status) ? '#e4f4eb' : (isOrderCancelled(singleOrder.status) ? '#f7d0c7' : '')
  }">
    {{ singleOrder.status }}
  </p>
</div>

额外优化方案（推荐） #

如果后续需要扩展更多状态样式，使用 [ngClass] 结合CSS类会更简洁易维护：

1. 添加CSS类 #

在组件的样式文件中定义对应状态的样式类：

.confirm-status {
  color: green;
  background-color: #e4f4eb;
}

.cancelled-status {
  color: red;
  background-color: #f7d0c7;
}

2. 模板中绑定ngClass #

<div *ngFor="let singleOrder of order.order">
  <p [ngClass]="{
    'confirm-status': isOrderConfirmed(singleOrder.status),
    'cancelled-status': isOrderCancelled(singleOrder.status)
  }">
    {{ singleOrder.status }}
  </p>
</div>

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