如何计算 Angular 7 中选中的复选框？

debugcn 发表于 Dev

冷却器

我想在我的表单上计算从数组中读取数据的选中复选框。我尝试了几种方法，但它不起作用。我以前从未这样做过，我不知道它是如何工作的。请各位大侠指点迷津好吗？我正在使用 Angular 7

HTML

<tr *ngFor="let p of product">
  <td class="text-left pl-3 py-1 font-small-2">
    <div class="custom-control custom-checkbox m-0">
      <input type="checkbox" class="custom-control-input" id={{p.label}} [(ngModel)]="count" (ngModelChange)="changed()">
      <label class="custom-control-label col-form-label" for={{p.label}}> 
           </label>
    </div>
  </td>
  <td>{{p.name}}</td>
</tr>
<p>Product count {{count}}</p>

打字稿

product = [{
    name: 'Razer R1',
    label: 'item1'
  },
  {
    name: 'Razer R2',
    label: 'item2'
  },
  {
    name: 'Razer R3',
    label: 'item3'
  },
]
changed() {
  this.count = 0;
  this.product.forEach(item => {
    console.log(item);
    if (item['checked']) {
      this.count = this.count + 1;
    }
  })
}

我不太确定这是正确的。那你能指导一下吗？谢谢。

帕斯·拉瓦尔

HTML代码：-

<tr *ngFor="let p of product">
  <td class="text-left pl-3 py-1 font-small-2">
    <div class="custom-control custom-checkbox m-0">
      <input type="checkbox" class="custom-control-input" id={{p.label}} [(ngModel)]="p.checked" (ngModelChange)="changed()">
      <label class="custom-control-label col-form-label" for={{p.label}}> 
       </label>
    </div>
  </td>
  <td>{{p.name}}</td>
</tr>
<br />
<br /> Total Items Checked :- {{count}}

角度组件代码：-

product = [{
    name: 'Razer R1',
    label: 'item1'
  },
  {
    name: 'Razer R2',
    label: 'item2'
  },
  {
    name: 'Razer R3',
    label: 'item3'
  },
]
changed() {
  this.count = 0;
  this.product.forEach(item => {
    if (item['checked']) {
      this.count = this.count + 1;
    }
  })
}

注意：- 您需要在 HTML 部分替换[(ngModel)]="count"为[(ngModel)]="p.checked"。请检查链接输出

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。