Change detection fails without error since Angular 4
There is one specific property in my service that breaks all my bind / change bindings when I bind it somewhere in my view. This has happened since I upgraded from Angular 2.x to 4.0.2
About the environment
To understand this, I created a simple BindingTestComponent. The template looks like this:
<button (click)="toggleName()">Toggle Name</button>
<div>Test: {{name}}!</div>
The BindingTestComponent typescript isn't much more than this:
name : string = 'Tom';
toggleName() {
this.name = this.name === 'Tom' ? 'Jerry' : 'Tom';
}
Now I can click on the button and the name switches between Tom and Jerry.
The problem occurs when I use workTime.duration
somewhere else in the same View that also includes a BindingTestComponent. How:
<div>{{workTime.duration}}</div>
<binding-test></binding-test>
When I click the Toggle Name button, nothing happens. Browser console sadly shows no errors.
Interestingly, I can fix the behavior of the BindingTextComponent using ChangeDetectorRef like so:
toggleName() {
this.name = this.name === 'Tom' ? 'Jerry' : 'Tom';
this.cdRef.detectChanges();
}
About service
It returns this duration:
get duration() {
let currentTime = new Date();
let startedWork = new Date(1492074996355);
return currentTime - startedWork;
}
I can guess his problem is that the property is never stable. It has a different meaning every time you ask for it. But..
How can I solve this problem?
and
Should this give me an error in the browser console?
source to share
No one has answered this question yet
Check out similar questions: