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
angular typescript


source to share


No one has answered this question yet

Check out similar questions:

378
Angular digital input error - EXCEPTION: Cannot resolve all parameters
360
How to detect when @Input () value changes in Angular?
318
Manually triggering change detection in Angular
284
How to determine the change of route in Angular?
252
Exception: Cannot bind to ngFor as it is not a known native property
155
Angular2 exception: cannot communicate with 'ngForIn' as it is not a known native property
13
Detecting changes in Angular 2.0
0
Angular representation 5 without displaying updated property value after initial change
0
binding data in Angular2
0
Angle change detection 5 when interacting with a service through a window object



All Articles
Loading...
X
Show
Funny
Dev
Pics