单击按钮后将'check'类添加到上一个项目中

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

尽管如果使用服务器端渲染，不建议使用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++;
    ....
}

Working Example

Answer 2

只是上一个项目？像这样更改您的ng-class声明：[ngClass]="{ 'current': lectureIndex == j, 'unlocked' : (lectureIndex!=0 && lectureIndex - 1 == j )}"Se here

Answer 3

[您也可以在[ngClass]中添加另一个条件，如果您希望将该类应用于所有先前的项目，则可以像'unlocked': lectureIndex > j。

看看是否有帮助：

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

类似地，您可以更改逻辑以适合您的情况。

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