Question

更改时，如果选中此复选框，我想在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>

Answer 1

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

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

Answer 2

您可以使用一个局部变量，该局部变量将保存当前所选索引的值
使用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>

TS：

selectedIndex: number;

change(event, item, i) {
  if (event.target.checked) {
    this.selectedIndex = i;
  }
  else {
    this.selectedIndex = -1;
  }
}

Working_Demo

编辑：

您可以在没有[(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>

Anguler 5：将类别添加到选中了复选框的特定索引LI

2 个答案: