Подсчитайте, сколько флажков отмечено с помощью угловых 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>

когда я нажимаю флажок, все флажки с нижним индексом также проверяются, а флажки с улучшенным индексом не проверяются

когда я нажимаю здесь check1 это делает это check2

так что мой счетчик должен быть на 2 с одним кликом

здесь функция, которую я использую для проверки флажков с предыдущими индексами

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

Я хотел бы посчитать, сколько флажков отмечено и отобразить результат в моем HTML-шаблоне, как мне этого добиться?

Answer 1

Что если вы поставите флажки в форме anfd, а затем подпишитесь на их значения, например:

HTML такой же, но оберните его тегом вида:

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

ц

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

Answer 2

Я столкнулся с той же проблемой. Я надеюсь, что следующее решение поможет вам

Вы можете запускать событие всякий раз, когда установлен или снят флажок, как показано ниже

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