如果单击angular2中的另一个复选框，如何自动取消选中所有复选框？

Question

我是angular2初学者。我使用一个通用复选框创建了一个部分隐藏和显示。选中此复选框会显示另一个复选框列表，未选中时会隐藏这些复选框列表。

但问题是，如果我选中复选框列表，然后隐藏此部分并再次选中，那么显示已经选中，但我尝试取消选中所有。如果选中列表，则单击通用复选框，以便取消选中该列表。

html 编码：-

<form [formGroup] = "group">
<p>
  <md-checkbox (change)="form()" [(ngModel)]="good" [ngModelOptions]="{standalone: true}" >Show/Hide and cheecked and unchecked</md-checkbox>
</p>

<div *ngIf="*ngIf="isVisible"" formArrayName="check">
  <span  *ngFor="let test of tests; let i = index" formGroupName="{{i}}">
     <md-checkbox formControlName="{{test.value}}" [checked] = "test.status" >{{test.display}}</md-checkbox>
   </span>
</div>

component.ts

tests:any = [
 { value: '1', display: 'One', status: 'false'},
 { value: '2', display: 'Two', status: 'false'},
 { value: '3', display: 'Three', status: 'false'},
 { value: '4', display: 'Four', status: 'false'}
]

isVisible:any;
good: string;
form() {
  let all: FormArray = new FormArray([]);
  for (let i = 0; i < this.tests.length; i++) {
    let fg = new FormGroup({});
    fg.addControl((this.tests[i].value).status, new FormControl(false))
    all.push(fg)
  }

  if(!this.isVisible) {
   this.group.get('tests').enable();
  } else {
   this.group.get('tests').disable();
  }
  this.isVisible = this.good;
}

请告诉我们怎么做？

Answer 1

请看这个 plunker 示例： https://plnkr.co/edit/KeicXhLFs6h5uxBolMuD?p=preview

在app.ts中：

update(index) {
    var currentState = this.options[index].val;
    for(let i = 0; i < this.options.length; i++) {
        this.options[i].val = false;
    }
    this.options[index].val = !currentState;
}

更新函数将在全部设置为 false 之前获取复选框的当前状态。在此之后，单击的复选框将更新为相反的。这样您也可以取消选中该复选框。

希望对您有所帮助。

如果单击angular2中的另一个复选框，如何自动取消选中所有复选框？

How to auto unchecked all checkbox if click another checkbox in angular2?

angular2-directives

angular