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>

当我单击一个复选框时，所有索引较低的复选框也会被选中，而索引较高的复选框则未被选中

当我单击此处check1时它做到了check2

所以我的计数器应该是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

如果将复选框放入表格anfd然后订阅它们的值更改，该怎么办？

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

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

2 个答案: