我寻找这个问题的答案,但我仍然卡住我有一个多行的表,每行有一个复选框,我需要一个复选框来选择所有并取消全部,这里有一些示例代码
模板：
模板：
<table class="table table-bordered table-condensed table-striped table-hover">
<thead>
<tr>
<th></th>
<th>Size</th>
<th>Diameter</th>
<th class="text-center">
<input type="checkBox" name="all" (change)="checkAll($event)"/>
</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let size of sizes | async ; let i = index">
<td class="text-right">{{i + 1}}</td>
<td class="text-right">{{size.size}}</td>
<td>{{size.diameter}}</td>
<td class="text-center">
<input type="checkBox" name="sizecb[]" value="{{size.id}}"/>
</td>
</tr>
</tbody>
零件：
export class ListSizeComponent implements OnInit {
constructor () {
}
sizes: any;
setSizes() {
this.sizes = [
{'size': '0','diameter': '16000 km'},{'size': '1','diameter': '32000 km'}
]
}
checkAll(ev) {
if (ev.target.checked) {
console.log("True")
} else {
console.log("False");
}
}
ngOnInit(): void {
this.setSizes();
}
}
解决方法
您可以利用ngModel来做到这一点.
模板：
<input type="checkBox" name="all" [checked]="isAllChecked()" (change)="checkAll($event)"/> .... <input type="checkBox" name="sizecb[]" value="{{size.id}}" [(ngModel)]="size.state"/>
零件：
checkAll(ev) {
this.sizes.forEach(x => x.state = ev.target.checked)
}
isAllChecked() {
return this.sizes.every(_ => _.state);
}
