Javascript &引用；取消选中所有复选框“；不使用角度属性绑定

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

模板：

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

---

在复选框上设置

ngModel

，并使用

ngModelChange

跟踪更改。还可以设置一个辅助数组来帮助您跟踪选中状态。以下是一个（简化的）示例：

HTML

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

一种解决方案是

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

---

首先，您应该知道[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>

{{item.name}

您没有像这样更改

选中的

元素属性值，您只是更改类中的属性

isSelected

值。要继续@onetwo12，您需要添加

（[选中]）

括号使其成为双向绑定，参考类似的答案@onetwo12“checked”属性不是依赖于类的“isSelected”属性吗？问题是“isSelected”永远不会更改（始终为false）-您可以先探测一下，如果等于isSelected=true，那么就不要刷新。无论如何，你必须有一些项目=[{title:'a'，selected:true}，{title:'b'，selected:true}，…]非常感谢。

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

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

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