Изменить цвет напечатанного значения на угловой 7 - PullRequest
Новая
       14

Изменить цвет напечатанного значения на угловой 7

0 голосов
/ 09 января 2019

Я пытаюсь вызвать 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;

}

**

EDIT:

HTML 

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

1024 * CSS * 

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

1 Ответ

0 голосов
/ 09 января 2019

Вы добавляете условие на основе класса, если условие 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;
}
...