angular - 我正在尝试计算每个行项目的总数，但在更改数量时它只计算数组中的第一个总数

Question

组件.ts

我不确定为什么我的 for 循环没有计算数组中每个项目的总数？

ngOnInit(): void {
  this.billLineItemsQuantityOnChange(this.billLineItems);
}

get billLineItems(): FormArray {
  return this.billForm.get('billLineItems') as FormArray;
}

calculateBillLineItemsTotal(billLineItems: FormArray): void {
  for(let i = 0; i <= billLineItems.length; i++) {
    const amount = billLineItems.at(i).get(['amount']);
    const quantity = billLineItems.at(i).get(['quantity']);
    const total = billLineItems.at(i).get(['total']);
    const calcTotal = amount!.value * quantity!.value;
    total!.setValue(calcTotal)
  }
}

billLineItemsQuantityOnChange(billLineItems: FormArray): void {
  for(let i = 0; i <= billLineItems.length; i++) {
    const amount = billLineItems.at(i).get(['amount']);
    const quantity = billLineItems.at(i).get(['quantity']);
    quantity!.valueChanges.subscribe(() => {
      if (amount!.value !== null && quantity!.value !== null) {
        this.calculateBillLineItemsTotal(billLineItems);
      }
    });
  }
}

标签： angularformarray

Answer 1

我将计算逻辑位置更改为 createBillLineItem 方法，设置为保持循环抛出控件，并在返回表单 Group 之前将小节设置为数量和数量的值更改

  createBillLineItem(): FormGroup {

    const fg  =this.fb.group({
      description: [null],
      amount: 0,
      quantity:0,
      total: 0,
    });

     fg.get('quantity').valueChanges.subscribe((qty) => {
       const amount  = +fg.get('amount').value || 0 ;
       fg.get('total').setValue(amount * +qty)
      });


     fg.get('quantity').valueChanges.subscribe((amount) => {
       const qty  = +fg.get('amount').value || 0 ;
       fg.get('total').setValue(amount * +qty)
      });

    return fg;
  }

演示