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

Question

Here is my checkboxes which i generate with 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>

when i click a checkbox, all the checkboxes with inferior index are checked as well and the checkboxes with superior index are unchecked

when i click here check1 it do that check2

so my counter should be at 2 with only 1 click

here the function that i use for check the checkboxes with previous indexes

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

i would like to count how many checkboxes are checked and display the result in my HTML template, how could i achieve this ?

Answer 1

I have faced the same problem. I hope the following solution will help you

You can trigger the event whenever checked or unchecked the box like bellow

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

And call in ts file like bellow and you can modify it as per your requirement.

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

What if you put the checkboxes into a form anfd then subscribe to their valuechanges like this:

html is the same but wrap it around with a form tag like this:

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