Угловая функция 2 ngClass

Question

Привет. Я был в процессе создания мастера / пошагового компонента. Как я могу использовать ngClass для возврата классов CSS на основе ->?

У меня есть 5 шагов, скажем, пользователь на третьем шаге. Все предыдущие шаги должны возвращать класс css с именем active, а текущий шаг (шаг 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

В качестве альтернативы, вы можете перебрать цикл и установить активный класс на свой шаг, как это -

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

рабочий пример

Answer 2

Проверьте следующий пример .

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 вызывается 10 раз при нажатии кнопки Click me. Это из-за механизма обнаружения угловых изменений. Когда что-то происходит, чтобы вызвать обнаружение изменений, angular пройдет через ваш шаблон и вызовет все. Таким образом, обычно не рекомендуется вызывать функции в шаблонах. Но, допустим, вам абсолютно необходимо это сделать. Затем вы можете использовать трубы.

Проверьте этот второй пример

В этом примере я переместил логику метода displayActiveness в трубу, чтобы он выполнялся только при изменении входных данных. Это может не сильно отличаться в вашем примере, но подумайте о гораздо более сложном методе. Вы не хотели бы, чтобы 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>

Answer 3

Почему бы не установить свой статусВыбран на номер, и им будет легко управлять?

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