我在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()函数?