使用 *ngFor 和基于 $event 的复选框

Question

我正在尝试使用 ngfor 生成复选框列表。一切正常，但如果我选中底部卡片行的第一个复选框，它似乎认为我选中了第一张卡片行的第一个框。

这是演示该问题的小 gif。 http://www.giphy.com/gifs/dQpr1jkRci0DaZoLMl

<div *ngFor="let task of taskdata" class="card" >

    <div *ngIf="task.task1" class="custom-control custom-checkbox">
          <input type="checkbox" class="custom-control-input" id="customCheck1" 
                (change)="getdataonID($event.target.checked)" [checked]="task.isDone1">
          <label class="custom-control-label" for="customCheck1">{{task.task1}}</label>
    </div>

Answer 1

将[(ngModel)]与选中的属性一起使用

 <input type="checkbox" class="custom-control-input" id="customCheck1" 
 (change)="getdataonID($event.target.checked)"  [(ngModel)]="task.isDone1">

Answer 2

您所有的复选框都具有相同的 ID。单击任何标签应该 select 由 customCheck1 标识的复选框。但是有很多。所以那是行不通的。

可能还有其他问题，但您没有post所有相关代码。

Answer 3

检查此 exmaple，希望它对您有用。我调用方法并将元素数据作为参数传递并在组件中执行计算，而不是事件。

使用 *ngFor 和基于 $event 的复选框

Using *ngFor and $event based checkbox

ngfor

angular