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

{{item}}

可以使用一个局部变量来保存当前选定索引的值

使用

event.target.checked

属性确定选中或未选中的值

要动态设置类，可以使用带条件的

[ngClass]

因此，HTML代码将是：

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

编辑：

您可以在不使用

[（ngModel）]

的情况下完成此操作，但是如果当前JSON数据是字符串列表，则需要对其进行一些修改：

JSON列表应为：

test: any[] = [{ name: 'Extra cheese' }, { name: 'Mushroom' }, { name: 'Extra Onion' }, { name: 'Tommatos' }];

然后更改函数：

change(event, item, i) {
  if (event.target.checked) {
    item.checked = true;
  }
  else {
    item.checked = false;
  }
}

HTML代码：

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

{{item.name}

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

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>

{{item}}

---

请参见

Try:

[ngClass]

？检查此项：Try

[ngClass]=“{'active'：item.checked}”

！谢谢，Prashant，它工作得很好，但是当我只选中复选框时，[活动]类应该被删除。现在，当我选中第二个时，活动类将被删除。@SunilYadav是的，因此这是您的预期，它是一次选中唯一一个复选框的。谢谢，它工作正常，我们可以不用[（ngModel）]来实现这一点。您可以用

（change）=“checked[I]=$event.target.checked”替换[（ngModel）]

但我不认为这有什么好处：您需要存储在变量（数组）中检查的值。如果问题是在ReactiveForm中使用的，则可以使用[ngModelOptions]=“{standalone:true}”

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