0

Html:

<div class="col-4" id="categories">
        <ul #list>
          <li *ngFor="let category of categories" [ngClass]="{'active': active}">
            {{category.name}}
          </li>
        </ul>

На чистом JS необходимая мне функция выглядела бы вот так:

    var i=0;
    while(i<list.childElementCount){
      setTimeout(function(){
        if(i == 0){
          list.children[childElementCount-1].classList.remove("active");
        } else {
          list.children[i-1].classList.remove("active");
        }
        list.children[i].classList.add("active");
        i++;
      }, 5000)

Как реализовать такое на Angular?

1 ответ 1

1

Используйте переменную индекса

<div class="col-4" id="categories">
    <ul #list>
      <li *ngFor="let category of categories; let i = index;" [ngClass]="i == 0?'active': ''">
        {{category.name}}
      </li>
    </ul>

тут мне еще посоветовали использовать другой синтаксис, который можно использовать если у вас несколько условий.

<li *ngFor="let category of categories; let i = index;" [ngClass]="{'active': i == 0}">

Для более ясного ознакомления лучше всего обращаться к первоисточнику ngClass.

2
  • Я бы скорректировал: [ngClass]="{'active': i == 0}" . Так всё таки правильней. 30 апр 2018 в 15:33
  • @SergeyRogachev Есть несколько вариантов, и они описаны в документации.
    – Roman C
    1 мая 2018 в 8:45

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.