Angular 4 - 根据状态更改步进器的背景颜色答案

【问题标题】：Angular 4 - Change Background color of Stepper depending on the statusAngular 4 - 根据状态更改步进器的背景颜色
【发布时间】：2019-01-14 10:21:10
【问题描述】：

我正在创建一个角度为 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

【问题讨论】：

你不应该在 getstatusBtnColor() 中传递一个参数吗？ getstatusBtnColor(stepper.status)... 在 TS 文件中，您处理传递的状态... getstatusBtnColor(passedStatus){ if (passedStatus== 'publish'){ return 'orange'; } else if (passedStatus == 'publishing'){ return 'green'; } }

标签： angular

【解决方案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

【讨论】：

嗨@8ytan，感谢您的回复。但 Switch case 在我的情况下不起作用，因为状态将不止一个，并且状态位于单独的对象中。我尝试使用循环并绑定状态，但它不起作用。 Stackblitz：stackblitz.com/edit/…
@ShradhaMallick 你能给我提供更多关于你想要做什么的信息吗？你链接的 StackBlitz 只是我原来的例子......
嗨@8ytan。请检查此网址stackblitz.com/edit/…。我想根据状态更改按钮的背景颜色。
@Shraddh 好的，我看到了你的问题。您似乎正在尝试根据表中的数据更改顶部状态按钮的颜色-您要达到什么目的？很抱歉一直在询问更多信息，但您可以给我发一张您希望它完成后的样子吗？

【解决方案2】：

使用样式属性[style.background-color] 而不是ngStyle

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

【讨论】：

【解决方案3】：

您的 HTML 部分是正确的。请检查 getstatusBtnColor 打字稿方法。您没有提供最后一个 else 条件，以防两个顶级条件都失败。您确定 status 字段是否具有这两个可能值之一？可以试试这个

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

【讨论】：