Angular 2 ngClass函数 [英] Angular 2 ngClass function
问题描述
我正在创建向导/步骤组件.
如何使用ngClass
返回基于->
的CSS类?
Hi I was in the midst of creating a wizard/step component.
How can I use the ngClass
to return css classes based on ->
?
我有5个步骤,假设用户处于第3步.前面所有步骤都应返回一个名为active
的css类,而当前步骤(步骤3)应返回css类active
,而步骤3之后的所有步骤应返回inactive
css类.
I have 5 steps, let's say the user is in the 3rd step. All the previous steps should return a css class named active
and the current step (step 3) returns css class active
and all the steps after step 3 should return inactive
css class.
<div class="step actived">
<span [ngClass]="displayActiveness()">Step 1
</span>
</div>
<div class="divider"></div>
<div class="step" [ngClass]="displayActiveness()">
<span>Step 2
</span>
</div>
.....
TS:
displayActiveness(status) {
if (this.statusSelected === 'step3') {
return 'active';
} else if (
this.statusSelected === 'step4' || this.statusSelected === 'step5'){
return 'inactive';
}
else if (
this.statusSelected === 'step1' || this.statusSelected === 'step2'){
return 'actived';
}
}
我被困住了.有人可以帮我这个忙吗?预先感谢.
I am stuck. Can someone please help me on this. Thanks in advance.
推荐答案
为什么不将您的statusSelected设置为数字,并且易于管理?
Why not set your statusSelected to number and it would be easy to manage?
TS:
statusSelected: number = 1; //step 1 by default
....
displayActiveness(status) {
if (this.statusSelected === status) {
return 'active';
}
if (this.statusSelected > status) {
return 'actived';
}
if (this.statusSelected < status) {
return 'inactive';
}
}
HTMl:
<div class="step" [ngClass]="displayActiveness(1)">
<span>Step 1</span>
</div>
<div class="divider"></div>
<div class="step" [ngClass]="displayActiveness(2)">
<span>Step 2</span>
</div>
与此有关,下一步可能只是:
with this, next step could be only:
nextStep() {
this.statusSelected++;
}
这篇关于Angular 2 ngClass函数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!