CODEWITHSUNDEEP
javascriptangulartypescript
test
test

Reputation: 3

how to binding getter value into HTML?

This is my getter: 

get diff(): number {
  if (this.budgetTotalDiffList) {   
    return this.budgetTotalDiffList.reduce((a, b) => (a ? Number(a) : 0 + b ? Number(b) : 0), 0);
  }
}

And this is my parent HTML:

<td>            
  <p>{{diff}}</p>
</td>

I have a child component to emit the budgetTotalDiffList to parent getter:

this.budgetTotalDiff.emit(Number(this.calculateNewForecastListTotal() - this.oldForecastListTotal));

when I change the child budgetTotalDiff, an error show up:

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null: 0'. Current value: 'null: -156546.0056374371'. "

Although the new budgetTotalDiff value can emit to parent, UI value doesn't change until i click the mouse.(so weird)

I try to google the error, it is about the lifecycles hook. most people set time out, but it's not work for me

Upvotes: 0

Views: 161

Answers (2)

Ankur Patel
Ankur Patel

Reputation: 488

You can solve your mouse event problem by using change detection in angular.

Write this code in your parent component.

import this

private ref: ChangeDetectorRef

Then write this line in your output function in parent component after set value

this.ref.detectChanges();

And also in HTML call function like this

{{diff()}}

Upvotes: 0

Mokka soru
Mokka soru

Reputation: 513

diff() is a function you should call like function. this is not bind value. you can use this like {{ diff() }}.

Upvotes: 1

Related Questions