working example

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：

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

HTML：

nextStep() {
    this.statusSelected++;
}

有了这个，下一步可能只有：

SELECT COUNT(id) as count 
FROM comments 
WHERE post_id IN (1, 2, 3, 4, 5) 
GROUP BY id HAVING count >= 0 ORDER BY created_at DESC, id DESC

Answer 2

或者，您可以迭代循环并将活动类设置为您的步骤 -

<div class="step" [ngClass]='{"active" : activeClassList[0]}'>
  <span>Step 0</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[1]}'>
  <span>Step 1</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[2]}'>
  <span>Step 2</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[3]}'>
  <span>Step 3</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[4]}'>
  <span>Step 4</span>
</div>
<div class="step" [ngClass]='{"active" : activeClassList[5]}'>
  <span>Step 5</span>
</div>

settingActiveClass() {
     for(let i=0; i < this.userLevel; i++) {
       this.activeClassList[i] = 'active';
     }
   }

working example

Answer 3

检查以下example。

component.html

<ul>
    <li *ngFor="let step of steps; let i = index">
        <span class="step" [ngClass]="displayActiveness(i)">
            {{step}} 
        </span>
        <button (click)="chooseStep(i)">Click me</button>
    </li>
</ul>

component.ts

export class AppComponent  {
  name = 'Angular 6';
  currentStep = 0;
  steps = ['step1', 'step2', 'step3', 'step4', 'step5'];

  chooseStep(index) {
    this.currentStep = index;
  }

  displayActiveness(index) {
    console.log('displayActiveness called')
    if (index > this.currentStep) {
      return 'inactive';
    } else {
      return 'active';
    }
  }

}

当您检查控制台时，当您点击displayActiveness按钮时，您会看到Click me方法被调用10次。这是因为角度变化检测机制。当某些事情发生触发变化检测时，角度将通过您的模板并调用所有内容。因此，通常在模板中调用函数不是一个好主意。但是，让我们说你绝对需要这样做。然后，您可以使用管道。

检查第二个example

在这个例子中，我将displayActiveness方法的逻辑移动到了一个Pipe，这样它只在输入改变时才被执行。你的例子可能没什么不同，但想到一个更复杂的方法。每次用户做某事时，你都不希望angular调用复杂的方法。

active.pipe.ts

@Pipe({
  name: 'activePipe'
})
export class ActivePipe implements PipeTransform {
  transform(index, currentStep) {
    console.log('pipe called')
    if (index > currentStep) {
      return 'inactive';
    } else {
      return 'active';
    }
  }
}

将ngClass更改为以下

<span class="step" [ngClass]="i | activePipe: currentStep">
    {{step}} 
</span>

Angular 2 ngClass函数

3 个答案:

working example