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屋！