我正在使用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时,第三个按钮会将其背景颜色更改为蓝色。
实现这一目标的最佳途径是什么?
谢谢。
答案 0 :(得分:2)
您可以使用ngClass
:
[ngClass]="{'fill-data-btn': currentStep == 3 }"
在你的css:
.fill-data-btn{
background-color: blue;
}
只是为了给你一个想法。
答案 1 :(得分: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>