Angular 2 ngClass 函数

Question

您好，我正在创建一个向导/步骤组件。如何使用 ngClass 返回基于 -> 的 css 类？

我有 5 个步骤，假设用户处于第 3 步。前面的所有步骤都应返回名为 active 的 css 类，当前步骤(第 3 步)返回 css 类 active，第 3 步之后的所有步骤应返回 inactive CSS 类。

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

我被困住了。有人可以帮我解决这个问题吗？提前致谢。

Answer 1

为什么不将你的statusSelected设置为number，这样会很容易管理？

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>

有了这个，下一步就只能是:

nextStep() {
    this.statusSelected++;
}