Я пытаюсь рассчитать итоговую сумму для каждой отдельной позиции, но при изменении количества вычисляется только первая итоговая сумма в массиве. - PullRequest
1 голос
/ 05 марта 2020

component.ts

Я не уверен, почему my for l oop не вычисляет сумму для каждого элемента в массиве?

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);
      }
    });
  }
}

1 Ответ

1 голос
/ 07 марта 2020

Я изменяю место вычисления logi c для метода createBillLineItem, вместо которого оставляю циклически изменяемые элементы управления throw, и я задаю подразделу изменение значения для количества и суммы, прежде чем вернуть форму Группа

  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;
  }

демо ?

...