Angular-单击按钮后将'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