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

Question

我想在我的表格中计算从数组中读取数据的复选框。 我尝试了几种方法，但没有用。 我以前从未这样做过，我也不知道它是如何工作的。 你们能帮我指路吗？ 我正在使用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;
    }
  })
}

我不太确定这是正确的。 那么，您可以指导我吗？ 谢谢。

Answer 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)]="p.checked" [(ngModel)]="count"替换为[(ngModel)]="p.checked" 。 请检查链接的输出