Добавить класс проверки к предыдущему элементу после нажатия кнопки

Question

Я пытаюсь добавить класс разблокирован на предыдущий элемент , когда я нажимаю кнопку, и мой текущий перемещается к следующему элементу, но я не могу выяснить, как. Текущая функциональность работает нормально, но я хочу добавить разблокированный класс. Любая помощь будет отличной.

<ul>
        <li class="locked" *ngFor="let subLecture of lectureList; let j = index"
            [ngClass]="{ 'current': lectureIndex == j}"
            (click)="lectureItemClick(j)">
          <a>{{subLecture}}</a>
        </li>
      </ul>
      <button (click)="nextLectureSecond()">Next</button>

Вот прилагаемая демонстрация: https://stackblitz.com/edit/angular-ivy-cdiev5

Answer 1

Вы также можете добавить другое условие в [ngClass], например, 'unlocked': lectureIndex > j, если вы используете sh, чтобы применить класс ко всем предыдущим элементам.

Посмотрите, поможет ли это:

<ul>
    <li class="locked" *ngFor="let subLecture of lectureList; let j = index"
        [ngClass]="{ 'current': lectureIndex == j, 'unlocked': lectureIndex > j}"
        (click)="lectureItemClick(j)">
      <a>{{subLecture}}</a>
    </li>
  </ul>

Точно так же вы можете изменить logi c в соответствии со своим сценарием.

Stackblitz: https://stackblitz.com/edit/angular-ivy-62422113

Answer 2

Только предыдущий элемент? Измените объявление ng-class следующим образом: [ngClass]="{ 'current': lectureIndex == j, 'unlocked' : (lectureIndex!=0 && lectureIndex - 1 == j )}" Здесь

Answer 3

Хотя не рекомендуется использовать ключевое слово document, если вы используете рендеринг на стороне сервера, вы также можете использовать другой обходной путь, вы также можете следовать приведенному ниже способу.

<li class="locked" *ngFor="let subLecture of lectureList; let j = index"      [id]="j">
....
</li>

nextLectureSecond() {
    ....
    let ele = document.getElementById(this.lectureIndex.toString());
    (<HTMLParagraphElement>ele).classList.add("unlocked");
    const a = this.lectureIndex++;
    ....
}

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