Question

我正在使用Angular 4，我有一堆在循环中创建的复选框。当我单独点击它们时(change)工作正常，但如果我使用全选checkbox，它就不会在各个复选框输入上触发change。

让我知道。目前，每个input的值都设置为sc.id。我计划在触发(change)时将它们添加到数组中但是当我选择全部时它不起作用。

我做错了什么？如果有人有更好的建议请告诉我

HTML

<input type="checkbox" class="custom-control-input"  (change)="allSelected = !allSelected">

<div *ngFor="let sc of scs?.data">
    <input  type="checkbox" class="custom-control-input" [value]="sc.id" [checked]="allSelected" ( change)="onSCSelect($event)">
</div>

组件

allSelected = false;

onSCSelect(event) {
    console.log(event);
  }

我创建了plunker来重现问题 https://embed.plnkr.co/TFxziXAEeutvLZ5rUXZS/

Answer 1

您应该使用[(ngModel)]来获得所需的结果。

<强> HTML

    select all
    <input type="checkbox" class="custom-control-input" [(ngModel)]="allSelected" (ngModelChange)="onAllSelectedChanged($event)">
    <br/>
    <div *ngFor="let sc of scs">
        <input type="checkbox" class="custom-control-input" [(ngModel)]="sc.checked" (ngModelChange)="onSelectionChanged($event)">
    </div>

<强> TS

export class AppComponent {
  allSelected = false;
  scs = [
    {id: 1},
    {id: 2},
    {id: 4}
  ];

  onAllSelectedChanged($event) {
     for(let i=0; i<this.scs.length; i++) {
       this.scs[i].checked = this.allSelected;
     }
  }

  onSelectionChanged(isSelected) {
   if (!isSelected) {
     this.allSelected = false;
   }
  }
}

有关详细信息，请参阅更新的plunker：

https://plnkr.co/edit/uSsI5YnBYShyIykAI7Vs?p=preview

当使用＆＃34;全选＆＃34;选择所有复选框时，（更改）不起作用。复选框

1 个答案: