计算 Angular 6 检查了多少个复选框

Posted 2023-05-07

【中文标题】计算 Angular 6 检查了多少个复选框

【英文标题】：Count how many checkboxes are checked with angular 6

【发布时间】：2019-02-10 08:30:42

【问题描述】：

这是我用 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 模板中显示结果，我该如何实现？

【问题讨论】：

你能把*ngFor也发一下吗？

是的，我编辑了我的帖子。

在您的 checkALL 函数中，如果为 true，您可以尝试 c.target.checked，然后在变量中维护所有检查值的计数记录，您将获得计数。

feature.tests 似乎包含所有复选框，对吧？因此，您可以应用这样的过滤器：feature.tests.filter(i => i.checked).length;。这将过滤所有选中的复选框并计算它们。您可以在您的角度视图中使用吸气剂来完成此操作。

【参考方案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;
     
  

【讨论】：

谢谢，但我如何计算总共检查了多少个复选框？

我知道的方法有两种

我知道有两种方法。一个是您可以在所有复选框中调用相同的方法并在该方法中增加计数器。另一种是在每个复选框中调用不同的方法，并在这些方法中增加相同的计数器。

【参考方案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++
      
 

【讨论】：

对不起，您也必须声明表单，并且名称必须与表单组值匹配