Question

我正在尝试调用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;
}

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

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

1 个答案: