angular2 - 动态更改颜色按钮答案

【问题标题】：angular2 - Change color button dynamicallyangular2 - 动态更改颜色按钮
【发布时间】：2017-03-08 03:55:44
【问题描述】：

我正在用 Angular 2 和 typescript 创建一个应用程序。

我想根据变量在按钮中添加一些背景颜色。

<div>
  <button md-button>1. Choose travel</button>
  <button md-button>2. Choose seats</button>
  <button md-button>3. Fill data</button>
  <button md-button>4. Pay</button>
</div>

我的组件中有一个变量：

currentStep: number = 1; //1 Select travel, 2 Choose seats, 3 Fill data, 4 Pay

例如，我希望当 currentStep 等于 3 时，第三个按钮将其背景颜色更改为蓝色。

实现这一目标的最佳方法是什么？

谢谢。

【问题讨论】：

您想在点击时应用或何时应用？
每当变量改变时

标签： css angular typescript styles

【解决方案1】：

你可以使用ngClass:

[ngClass]="{'fill-data-btn': currentStep == 3 }"

在你的 css 中：

.fill-data-btn{
background-color: blue;
}

只是给你一个想法。

【讨论】：

【解决方案2】：

<div>
  <button [style.background]=" currentStep === 1 ?'blue':'otherColor'" md-button>1. Choose travel</button>
  <button [style.background]=" currentStep === 2 ?'blue':'otherColor'" md-button>2. Choose seats</button>
  <button [style.background]=" currentStep === 3 ?'blue':'otherColor'" md-button>3. Fill data</button>
  <button [style.background]=" currentStep === 4 ?'blue':'otherColor'" md-button>4. Pay</button>
</div>

【讨论】：