时间戳

首页 > 解决方案 > Angler 5：将类添加到选中复选框的特定索引 LI

angular - Angler 5：将类添加到选中复选框的特定索引 LI

问题描述

更改时，如果选中复选框，我想在 LI 上为特定索引添加活动类，如果未选中，则删除活动类。

TS文件

 test = [];

HTML 文件

 <li *ngFor="let item of test; let i = index">
  <input type="checkbox" (change)="change($event, item, i)"> 
  <span class="active"> {{item}} </span>
</li>

标签： angular

解决方案

如果要为所有检查的元素添加一个类，则需要将检查的值存储在一个变量中。通常我们迭代一个对象数组，但是如果你迭代一个字符串数组，你需要声明一个新变量，它是一个布尔数组

checked:boolean[]=[];

然后，使用 [ngModel]

<li *ngFor="let item of test; let i = index">
  <input type="checkbox" [(ngModel)]="checked[i]" > 
  <span [ngClass]="{'active' : checked[i]}"> {{item}} </span>
</li>

见stackblitz

推荐阅读