Угловой стиль 2, 4 или 5 нг с более чем 2 условными выходами

Question

как angularjs 1.x как реализовать ngstyle для более чем 2 условий?

Angularjs 1.x:

<div ng-controller="MyCtrl">
 <p ng-style="cond1  ? { color:'green' } : cond2 ? {color: 'blue'} : cond3 ? {color: 'red'} : {color: ''}">Hello World!</p>
</div>

Радиально-2/4/5: В приведенном ниже коде darked, gold и green - переменные, объявленные в typcrip.

<button class="button" id="btn_status" [ngStyle]="darked?     {backgroundColor:'darked'} : gold?{backgroundColor:'gold'} : green?{backgroundColor:'green'}">

Ошибка здесь,

Answer 1

Вы также можете сделать это так:

<button class="button" id="btn_status" [ngStyle]="{'backgroundColor': darked || gold || green}">

Компонент:

darked = null;
gold = null;
green = null;

cond1() {
  if(true) 
    this.darked = 'black'
}

Answer 2

Если вы хотите что-то подобное, вам лучше вызвать метод. Вы хотите избежать использования большого количества логики в шаблоне, если это возможно:

<button
  class="button"
  id="connection_status"
  [ngStyle]="colorCheck()">

И тогда метод возвращает нужный вам цвет.

colorCheck() {
  if (this.darked) {
    return {backgroundColor: 'darked'};
  }
}

Или даже лучше, поскольку они все того же класса, который вы устанавливаете:

<button
  class="button"
  id="connection_status"
  [style.backgroundColor]="colorCheck()">

colorCheck() {
  if (this.green) {
    return 'green';
  }
  // etc
}