计算用角度 6 选中的复选框数量

Question

这是我用ngFor生成的复选框

<div *ngFor="let check of feature.tests; let i = index" class="col-md-12">
<mat-checkbox [checked]="i <= map[l][k]" [(ngModel)]="check.checked"
(change)="checkAll($event.checked, i ,k,  l)"
(ngModelChange)="changed(i)">{{check.name}} - {{feature.type}}
</mat-checkbox>
</div>

当我单击复选框时，所有具有下级索引的复选框也被选中，而具有高级索引的复选框也被取消选中

当我单击此处检查1 它执行该检查2

所以我的计数器应该在 2 只需点击 1 次

这是我用于选中具有先前索引的复选框的函数

checkAll(c, i: number, k, l) {
if (c) {
this.map[l][k] = i;
} else {
this.map[l][k] = i - 1;
}
}

我想计算选中了多少复选框并在我的 HTML 模板中显示结果，我该如何实现？

Answer 1

我遇到了同样的问题。我希望以下解决方案对您有所帮助

您可以在选中或取消选中框(如波纹管(时触发事件

<input type="checkbox" class="form-check-input" id="exampleCheck2" (change)="checkBox($event);">

并像波纹管一样调用ts文件，您可以根据需要对其进行修改。

checkBox(enent){
this.counter++; // counter is the varible
if(this.counter%2==1){
this.checked= true; //checked is the variable
}
else{
this.checked=false;
}
}

Answer 2

如果您将复选框放入表单中，然后订阅其值更改，如下所示：

html 是相同的，但用这样的表单标签包装它：

<form [formGroup]="form">
...
</form>

TS：

form: FormGroup;
count=0
this.form.valueChanges.subscribe(()=>{
for(let i=0; i<this.form.value.length; i++){
if(this.form.value[i]==true){
count++
}
}}