单击按钮后将“检查”类添加到上一项

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如果您希望将该类应用于所有先前的项目。看看这是否有帮助：<ul>&nbsp; &nbsp; <li class="locked" *ngFor="let subLecture of lectureList; let j = index"&nbsp; &nbsp; &nbsp; &nbsp; [ngClass]="{ 'current': lectureIndex == j, 'unlocked': lectureIndex > j}"&nbsp; &nbsp; &nbsp; &nbsp; (click)="lectureItemClick(j)">&nbsp; &nbsp; &nbsp; <a>{{subLecture}}</a>&nbsp; &nbsp; </li>&nbsp; </ul>同样，您可以更改逻辑以适合您的场景。Stackblitz：https ://stackblitz.com/edit/angular-ivy-62422113

Answer 2

虽然document在使用服务器端渲染的情况下不建议使用关键字，但您也可以使用其他解决方法，您也可以按照以下方式进行操作。<li class="locked" *ngFor="let subLecture of lectureList; let j = index"&nbsp; &nbsp; &nbsp; [id]="j">....</li>nextLectureSecond() {&nbsp; &nbsp; ....&nbsp; &nbsp; let ele = document.getElementById(this.lectureIndex.toString());&nbsp; &nbsp; (<HTMLParagraphElement>ele).classList.add("unlocked");&nbsp; &nbsp; const a = this.lectureIndex++;&nbsp; &nbsp; ....}

Answer 3

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