Angular NGMODEL检查所有复选框

Question

尝试检查所有使用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

Answer 1

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

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

ex：

<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 
   }
}