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

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>

    <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

Answer 2

虽然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++;

    ....

}

Answer 3

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