Javascript 带有复选框和NgFor的自定义CSS

当使用

*ngFor

进行迭代时，我试图获得一个自定义复选框“clickable”。我有定制的CSS，但是没有任何东西在点击事件上起作用

我猜这是因为标签上的

for

属性，但我不知道如何修复它

闪电战：

HTML:

这样你的身份证就会是这样的

<div *ngFor="let item of data;let i = index">
  <input type="checkbox" [checked]= "item.selected" id="{{'checkbox'+i}}" (change)="setChange(item, $event)">
  <label for="{{'checkbox' + i}}">{{item.name}}</label>
</div>

复选框1

复选框2

---

…

试着这样做，我刚刚为按项目名称设置的复选框id的标签基设置了for属性

<div *ngFor="let item of data">
  <input type="checkbox"  [id]="item.name">
  <label [for]="item.name">{{item.name}}</label>
</div>

{{item.name}

---

demo

labels

使用属性

for

not

htmlFor

<div *ngFor="let item of data;let i = index">
  <input type="checkbox" [checked]= "item.selected" id="{{item.name}}" (change)="setChange(item, $event)">
  <label for="{{item.name}}">{{item.name}}</label>
</div>

<div *ngFor="let item of data;let i = index">
  <input type="checkbox" [checked]= "item.selected" id="{{'checkbox'+i}}" (change)="setChange(item, $event)">
  <label for="{{'checkbox' + i}}">{{item.name}}</label>
</div>

<div *ngFor="let item of data">
  <input type="checkbox"  [id]="item.name">
  <label [for]="item.name">{{item.name}}</label>
</div>