javascript - Angular 2 not re-rendering until I click the page? - Stack Overflow

admin管理员组

文章数量:1356742

On this page here.

It's possible to see that the Facebook login button is initially disabled. (Using [disabled]="myProperty")

Once an API request /facebooklogin/isnewuser returns, it is enabled.

Everything works fine. However, the button won't be re-rendered until I click on the page.

I've also noticed that this happens with most things involving the data-binder in Angular.

• Is this intended behavior?
• Is there anyway around this?
• Is this specific to Angular?

Tested on Firefox & Chrome

On this page here.

It's possible to see that the Facebook login button is initially disabled. (Using [disabled]="myProperty")

Once an API request /facebooklogin/isnewuser returns, it is enabled.

Everything works fine. However, the button won't be re-rendered until I click on the page.

I've also noticed that this happens with most things involving the data-binder in Angular.

• Is this intended behavior?
• Is there anyway around this?
• Is this specific to Angular?

Tested on Firefox & Chrome

• javascript
• angular
• browser

Share Improve this question Follow asked Feb 1, 2017 at 21:33 williamsandonzwilliamsandonz 16.5k2323 gold badges107107 silver badges190190 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

It seems that for some reason change detection isn't happening as it should. You can "force" it with NgZone or manually trigger change detection with ChangeDetectorRef:

import { ChangeDetectorRef } from '@angular/core' 

constructor(private ref: ChangeDetectorRef) {}

and then run detectChanges() after setting your variable:

// whatever you are using to disable/enable button
this.myProperty = false;
this.ref.detectChanges();

or the use of NgZone:

import { NgZone } from '@angular/core' 

constructor(private ngZone: NgZone) {}

and add something like the following where you are enabling the button:

// whatever you are using to disable/enable button
this.ngZone.run(() => {this.myProperty = false})

I can't say anything more to as why this is happening. I have noticed that once in while these things happen for no apparent reason, this seems to be one of those cases. If anyone has some insight on this, please do tell. Haven't e upon anyone who has been able to explain this, yet :)

本文标签： javascriptAngular 2 not rerendering until I click the pageStack Overflow