在复选框上单击显示计数获取为角度 8 中的所有项目选中

Question

我正在尝试实现对单个项目的更改事件，以获取计数。当我点击单个复选框showCount对所有项目都为true时，

是否有任何方法可以使选中复选框的满足此条件

<div *ngFor="let a of data">
<label>
<input type="checkbox" name="checkbox" (change)="onCheck($event)">
{{a.name}}
</label>
<span *ngIf="showCount">{{a.count}}</span>
</div>

.ts文件

showCount:boolean = false;
data = [
{"name": "javascript" , "count" : 12},
{"name": "Angular" , "count" : 13},
{"name": "Typescript" , "count" : 14},
{"name": "Java" , "count" : 15},
{"name": "Python" , "count" : 16},
]
onCheck(event){
if(event.target.checked){
this.showCount = true;
}
else{
this.showCount= false;
}  
}

Answer 1

您需要一种方法来区分每个复选框

<div *ngFor="let a of data; let i = index">
<label>
<input type="checkbox" name="checkbox" (change)="onCheck($event, i)">
{{a.name}}
</label>
<span *ngIf="showCount[i]">{{a.count}}</span>
</div>

showCount:boolean[] = [false];
onCheck(event, i){
if(event.target.checked){
this.showCount[i] = true;
}
else{
this.showCount[i] = false;
}  
}