“取消选择所有复选框”不适用于角度属性绑定答案

【问题标题】："Deselect all checkboxes" not working with angular property binding“取消选择所有复选框”不适用于角度属性绑定
【发布时间】：2017-10-04 15:06:05
【问题描述】：

我在 Angular 中使用了属性绑定来取消选择所有复选框，但它没有按预期工作。我的预期：当我点击“清除”按钮选择一个或多个复选框后，它应该取消选择所有复选框。这是我的plunker

isSelected is the boolean variable which i have used to set the 'checked' attribute of checkbox.

模板：

<div *ngFor="let item of items">
    <input [checked]="isSelected" type="checkbox">{{item}}
</div>
<button (click)="onClear()">Clear All</button>

组件

private items = ['a', 'b', 'c', 'd'];
  private isSelected = false;
  constructor() {
  }

  onClear(){
    this.isSelected = false;
  }

【问题讨论】：

您不会像那样更改 checked 元素属性值，您只是在更改类中的属性 isSelected 值。
要继续@onetwo12，您需要添加([checked])括号使其成为双向绑定参考类似答案here
@onetwo12 不是依赖于类的 'isSelected' 属性的 'checked' 属性吗？
问题是“isSelected”永远不会改变（总是假的）。 - 你可以先探测 if equals isSelected=true - 所以，Angular 不会刷新。无论如何，您必须有一些 items=[{title:'a',selected:true},{title:'b',selected:true},...]

标签： javascript angular ngfor property-binding

【解决方案1】：

在您的复选框上设置ngModel 并使用ngModelChange 跟踪更改。还设置一个辅助数组来帮助您跟踪检查的状态。这是一个（简化的）示例：

HTML

<input [ngModel]="isSelected[i]" (ngModelChange)="onChange(i)" type="checkbox">{{item}}

打字稿

 isSelected =  [];
 constructor() {
   this.onClear();
 }

 onChange(i){
    this.isSelected[i]=!this.isSelected[i]
  }
  onClear(){
    this.isSelected = [false, false, false, false];
  }

DEMO

【讨论】：

非常感谢。

【解决方案2】：

一个解决方案是

<div *ngFor="let item of items">
    <input [(ngModel)]="item.checked" type="checkbox">{{item.label}}
</div>
<button (click)="onClear()">Clear All</button>

使用模板：

private items = [ {'label':'a', 'checked': false },
  {'label':'b', 'checked': false},
  {'label':'c', 'checked': false},
  {'label':'d', 'checked': false}];

onClear(){
    for ( let cb of this.items ) {
      cb.checked = false;
    }
  }

【讨论】：

【解决方案3】：

首先，你应该知道 [checked] 不起作用，你应该使用 [(ngModel)] 来处理这个事情，你应该从 @angular/forms 导入 FormModule。

其次，您应该有多个 isSelected 变量，因为如果您在选择其中一个时只使用一个 isSelected 变量，则所有复选框都将被选中，为此，您可以在 .ts 文件中使用这样的数组，

items = [{name: 'a', isSelected:false}, 
         {name: 'b', isSelected:false},
         {name: 'c', isSelected:false},
         {name: 'd', isSelected:false}];

在 HTML

中

<div *ngFor="let item of items">
    <input [(ngModel)]="item.isSelected" type="checkbox">{{item.name}}
</div>

【讨论】：