更改 angular 中打印值的颜色 7

Question

我正在尝试调用 API 并在我的前端显示 json。

我想更改名为 {{status}} 的特定值的颜色。当状态可用时，我希望它为绿色，当不可用时为红色。

我尝试使用 class，但我没有成功。任何线索都会有所帮助。

这是我目前试过的代码。

app.html

<h1>Demo</h1>
<ul>
<ol>
  <li *ngFor="let ex of ex$ ">
        <a>id: {{ex.id}}</a>
        <a>Status: {{ex.status}}</a>
        <span class: "changecolor">{{ex.status}}</span>
        <a>address: {{ex.address}}</a>

  </li>
</ol>
</ul>

在css文件中

**

.changecolor{

color: green;

}

**

编辑：

html

<div [ngClass]="ex.status === 'available'? 'green':'red'">Status: {{ex.status}}</div>

css

  .green {
  color: yellow;
}
.red {
  color: blue;
}

Answer 1

您已根据 class 添加条件如果条件是 true 显示您的主要 class 否则次要

Html:

<div *ngFor="let ex of ex$">
  <div>Status: <span [ngClass]="ex.status === 'available'? 'green':'red'">{{ex.status}}</span></div>
</div>

Css:

.green {
  color: green;
}
.red {
  color: red;
}

更改 angular 中打印值的颜色 7

Change the colour of printed value in angular 7

ng-class

angular

angular7