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?

+3


source to share





All Articles