"Deselect all checkboxes" 无法使用 angular 属性 绑定
"Deselect all checkboxes" not working with angular property binding
我在 angular 中使用 属性 绑定来取消选择所有复选框,但它没有按预期工作。
我的预期:当我单击 'clear' 按钮时选择一个或多个复选框后,它应该取消选择所有复选框。
这是我的 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;
}
在您的复选框上设置 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];
}
一个解决方案是
<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;
}
}
首先,您应该知道 [checked] 不起作用,您应该为此使用 [(ngModel)],并且您应该从 @angular/forms.
导入 FormModule
其次,你应该有多个 isSelected 变量,因为如果你只使用一个 isSelected 变量,而你 select 其中一个变量,所有复选框都将是 select,
为此,您可以在 .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>
我在 angular 中使用 属性 绑定来取消选择所有复选框,但它没有按预期工作。 我的预期:当我单击 'clear' 按钮时选择一个或多个复选框后,它应该取消选择所有复选框。 这是我的 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;
}
在您的复选框上设置 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];
}
一个解决方案是
<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;
}
}
首先,您应该知道 [checked] 不起作用,您应该为此使用 [(ngModel)],并且您应该从 @angular/forms.
导入 FormModule其次,你应该有多个 isSelected 变量,因为如果你只使用一个 isSelected 变量,而你 select 其中一个变量,所有复选框都将是 select, 为此,您可以在 .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>