Question

我正在创建角度为4的步进器。我没有使用角度材料为步进器。我需要根据从API接收到的状态来更改步进器的背景颜色。例如：如果状态为“发布”，则第一个步进器的背景色应为橙色，如果状态为“发布”，则第一个步进器的颜色应为绿色，而第二个步进器的背景色应为橙色。。如果有人可以提供帮助，那就太好了。

<ul class="nav nav-tabs" role="tablist">
                <li role="presentation"  *ngFor=" let stepper of stepperBtns">
                  <div>
                    <button  [ngStyle]="{'background-color': getstatusBtnColor()}" [type]="stepper.type" class="round-tab">{{stepper.name}}</button>
                  </div> 
                  
                </li>
              </ul>

getstatusBtnColor(){
   if (status== 'publish'){
        return 'orange';
      }
      else if (status == 'publishing'){
      return 'green';
      }
      }

Stackblitz：https://stackblitz.com/edit/angular-slhwpu?file=src%2Fapp%2Fapp.component.ts

Answer 1

您的HTML对我来说看起来是正确的。但是您的Typescript函数有点差-您无法从任何可见的地方获得status的值。

尝试类似的东西：

getstatusBtnColor(status: string) {
  switch(status) {
    case 'publish':
      return 'orange';
    case 'publishing':
      return 'green';

    default:
      return 'red';
  }
}

然后将您的状态从HTML传递到函数中。（我添加了默认情况，以防止问题是您的状态值不正确）

StackBlitz：https://stackblitz.com/edit/angular-9uuaaj

Answer 2

使用样式属性[style.background-color]代替ngStyle

<button [style.background-color]="getstatusBtnColor()" [type]="stepper.type" class="round-tab">{{stepper.name}}</button>

Answer 3

您的HTML部分正确。请检查 getstatusBtnColor 打字稿方法。如果两个最高条件均失败，则您没有提供其他条件。您确定状态字段确实具有以下两个可能值之一吗？可以尝试一下

getstatusBtnColor(){
   if (status== 'publish'){
    return 'orange';
  }
  else if (status == 'publishing'){
  return 'green';
  }else{
   return 'blue';  //just to check 'status' value, in case status is neither publish nor publishing
  }
  }

角度4-根据状态更改步进器的背景颜色

3 个答案: