Angular ngModel 检查所有复选框答案

【问题标题】：Angular ngModel checks all checkboxesAngular ngModel 检查所有复选框
【发布时间】：2019-05-14 19:36:10
【问题描述】：

尝试使用 ngModel 选中/取消选中所有子复选框并选中所有复选框，但也尝试单独选中子复选框并始终选中所有复选框；

<div>
    <input type="checkbox" [checked]="myVar1" (change)="myVar1 = !myVar1" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVar1" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVar1" /> Child2
  </ul>

尝试使用 [ngModelOptions]="{standalone: true}" 属性，结果相同 - 所有复选框都被选中；

 <div>
    <input type="checkbox" [checked]="myVar2" (change)="myVar2 = !myVar2" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVar2" [ngModelOptions]="{standalone: true}" /> Child2
  </ul>

如何使每个子复选框独立？ stackblitz

【问题讨论】：

您的子复选框使用与父复选框 myVar1 或 myVar2 相同的值，应该类似于 myChild1、myChild2，并且当单击父复选框时，创建一个使所有子复选框“选中”的函数。

标签： angular angular-ngmodel angular-forms

【解决方案1】：

您对孩子和父母使用相同的[(ngModel)]，这会在检查父母后立即检查孩子。

您需要为子级设置不同的[(ngModel)]，并在父级复选框上使用选中/更改功能来检查所有子级，即将子级ngModel 设置为true 或false。

前：

<div>
    <input type="checkbox" [checked]="myVar1" (change)="updateChildSelection($event)" /> Parent
  </div>
  <ul>
    <input type="checkbox" [(ngModel)]="myVarChild1" /> Child1<br>
    <input type="checkbox" [(ngModel)]="myVarChild2" /> Child2
  </ul>

在组件中：

updateChildSelection(event) {
  // set child to true if checked
   if(event.target.checked){
    this.myVarChild1 = true;
    this.myVarChild2 = true
   } else {
   //set child model to false 
   }

}

【讨论】：