在以Angular形式选中复选框后触发函数

时间:2018-08-09 12:49:50

标签: angular

我在Angular 6应用中有一个带复选框的动态表格。以下代码检索我组件的数据并填充一个反应形式:

ngOnInit() {
  this.accountsService.getApprovedInvoicesToBeEntered()
    .pipe(first())
    .subscribe(
      result => {
        this.approvedInvoices = result;
        this.controls = this.approvedInvoices.map(c => new FormControl(false));
        this.form = this.formBuilder.group({
          approvedInvoices: new FormArray(this.controls)
        });
      },
      () => { });
}

updateSubtotal() {
  this.selectedTotal  = this.form.value.approvedInvoices
    .map((v, i) => v ? this.approvedInvoices[i] : null)
    .filter(v => v !== null)
    .reduce((a, b) => +a + +b.total, 0);
}

}

这是我的html:

  <tbody formArrayName="approvedInvoices" *ngFor="let approvedInvoice of approvedInvoices; let i = index">
    <tr>
      <td>
         <input type="checkbox" (click)="updateSubtotal()" [formControlName]="i" id="{{i}}">
      </td>
    </td>
  </table>

这确实很好,但是我的问题是updateSubtotal没有考虑当前单击的项目。如果我有一个带有发票的表单,然后单击第一个,然后selectedTotal =0。当我选择第二个发票时,selectedTotal等于第一张发票的总和。

在复选框标记为选中后,如何触发updateSubtotal()函数?

0 个答案:

没有答案