Angular2 - Expression has changed after it was checked.

Mam w angularze 2 formularz, w którym występują min. 4 pola (netValue - netto, quatity - ilość, vatRate - stawka VAT oraz grossValueAdded - suma brutto). Chciałbym móc na żywo modyfikować poszczególne elementy i widzieć zmianę w pozostałych (przykładowo edytując sumę brutto widzieć, że zmienia się cena netto i edytując cenę netto widzieć, że zmienia się suma brutto). Wymyśliłem, że będę reagował na zmiany tych pól jak poniżej, ale powoduje to w pewnych przypadkach pojawienie się błędu "Expression has changed after it was checked." Jak w takim przypadku sobie poradzić, żeby zmiany nie wywoływały kolejnych eventów?

        this.subscriptionServiceItemForm.controls["netValue"].valueChanges
            .subscribe((ngModelChange) => {
                this.subscriptionServiceItem.grossValueAdded = (this.subscriptionServiceItem.netValue * this.subscriptionServiceItem.quantity) * (1 + (this.subscriptionServiceItem.vatRate / 100));
            });

        this.subscriptionServiceItemForm.controls["quantity"].valueChanges
            .subscribe((ngModelChange) => {
                this.subscriptionServiceItem.grossValueAdded = (this.subscriptionServiceItem.netValue * this.subscriptionServiceItem.quantity) * (1 + (this.subscriptionServiceItem.vatRate / 100));
            });

        this.subscriptionServiceItemForm.controls["vatRate"].valueChanges
            .subscribe((ngModelChange) => {
                this.subscriptionServiceItem.grossValueAdded = (this.subscriptionServiceItem.netValue * this.subscriptionServiceItem.quantity) * (1 + (this.subscriptionServiceItem.vatRate / 100));
            });

        this.subscriptionServiceItemForm.controls["grossValueAdded"].valueChanges
            .subscribe((ngModelChange) => {
                this.subscriptionServiceItem.netValue = this.subscriptionServiceItem.grossValueAdded / (1 + (this.subscriptionServiceItem.vatRate / 100)) / this.subscriptionServiceItem.quantity;
            });

A może zaimplementujesz OnChanges i będziesz wykonywał oblicznie na obiekcie

class CartComponent implements OnChanges {
private cart: Cart;
ngOnChanges(){
   calculate(cart)
}
}

Szczery napisał(a):

A może zaimplementujesz OnChanges i będziesz wykonywał oblicznie na obiekcie

class CartComponent implements OnChanges {
private cart: Cart;
ngOnChanges(){
   calculate(cart)
}
}

Z tego co czytałem to Onchanges jest wywoływane jeżeli zmieni się @Input() komponentu. Czy da się tym wykryć zmianę modelu w formie komponentu?

Racja
a tak

 this.form = formBuilder.group({
      firstName: 'Thomas',
      lastName: 'Mann'
    })

this.form.valueChanges.subscribe(data => {
      console.log('Form changes', data)
      cacluclate(this.model)
    })

Szczery napisał(a):

Racja
a tak

 this.form = formBuilder.group({
      firstName: 'Thomas',
      lastName: 'Mann'
    })

this.form.valueChanges.subscribe(data => {
      console.log('Form changes', data)
      cacluclate(this.model)
    })

Niby ok, ale jak tu wyciągnąć co wywołało event?

Wydaje mi się, że rozwiązałem problem przez zastosowanie debounceTime.

U mnie np nie ma znaczenia co wywołało event bo i tak zawsze wyliczam na pozycji zamowienia cena * ilość, stawka vat itp. Pokaż rozwiązanie z debounceTime bo za bardzo nie wiem jak ci to pomoglo rozwiązać problem...ewentualnie zamiast debounceTime spróbuj distinct'a