更改角度 7 中打印值的颜色答案

【问题标题】：Change the colour of printed value in angular 7更改角度 7 中打印值的颜色
【发布时间】：2019-01-09 14:14:39
【问题描述】：

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

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

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

这是我迄今为止尝试过的代码。

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;
}

【问题讨论】：

您是否尝试过按标签使用ngClass？您是否尝试过使用正确的 HTML 语法 (attr="value")？
怎么知道状态可用？它是一个值为“available”的字符串吗？
其中一个建议与框架无关。对于其他，请参阅angular.io/tutorial。
@Mikz 试试这样<div [ngClass]="[condition ? 'first' : 'second']"></div>
@Mikz ex.status === available 第二类仅适用条件为假。

标签： angular angular7 ng-class

【解决方案1】：

如果条件为true，则您已根据班级添加条件@显示您的主要班级，其他明智的次要班级

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;
}

【讨论】：