Angular 2 ngClass 函数

Question

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

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

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

网页版：

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