Angular 7中如何根据API返回的status值动态修改文本颜色？

我来帮你搞定这个动态样式的问题！你的思路方向是对的，用Angular的指令来绑定类就能实现需求，之前的问题大多出在语法细节或者指令使用的小疏漏上。下面是完整的可行方案，还有对你之前代码问题的分析：

正确实现代码 #

HTML模板（app.html） #

<h1>Demo</h1>
<ul>
  <!-- 注意：ul和ol不能直接嵌套，这里调整了列表结构，确保语义正确 -->
  <li *ngFor="let ex of ex$ | async">
    <span>id: {{ex.id}}</span>
    <span>address: {{ex.address}}</span>
    <!-- 用ngClass根据status动态切换样式类 -->
    <span [ngClass]="{'status-available': ex.status === 'available', 'status-unavailable': ex.status !== 'available'}">
      Status: {{ex.status}}
    </span>
  </li>
</ul>

CSS样式文件 #

.status-available {
  color: green;
}

.status-unavailable {
  color: red;
}

分析你之前代码的问题 #

1. 初始代码的语法错误：
   你写的 <span class: "changecolor"> 是错误的，HTML设置类的正确语法是 class="changecolor"，而且这种固定类的写法没办法实现动态切换样式的需求。

2. 编辑后代码的潜在问题：
   你用 [ngClass] 三元表达式的思路是可行的，但要注意：如果 ex$ 是一个Observable对象，必须在 *ngFor 里加上 | async 管道来订阅数据，否则模板根本拿不到数据，样式切换自然不会生效。另外你CSS里把可用状态设成yellow、不可用设成blue，和你需求的绿色/红色不符，调整颜色值就能解决。

额外优化建议 #

如果只是简单的颜色切换，也可以用 ngStyle 直接内联设置样式，不用额外维护CSS类：

<span [ngStyle]="{'color': ex.status === 'available' ? 'green' : 'red'}">
  Status: {{ex.status}}
</span>

这种方式适合样式逻辑简单的场景，代码更紧凑。

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