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

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

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

Answer 2

将 [(ngModel)] 与checked属性

一起使用

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

Answer 3

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

使用* ngFor和$ event based复选框

3 个答案: