Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AsyncPipe breaks change detection with NaN values #15721

Closed
textbook opened this issue Apr 3, 2017 · 6 comments

Comments

Projects
None yet
6 participants
@textbook
Copy link
Contributor

commented Apr 3, 2017

I'm submitting a ...

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

It seems that the AsyncPipe emits a WrappedValue (which appears below as '[object Object]') then the NaN, which causes an expression change:

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: '[object Object]'. Current value: 'NaN'.
    at viewDebugError (errors.ts:30) [angular]
    at expressionChangedAfterItHasBeenCheckedError (errors.ts:29) [angular]
    at checkBindingNoChanges (util.ts:145) [angular]
    at checkNoChangesNodeInline (view.ts:438) [angular]
    at checkNoChangesNode (view.ts:519) [angular]
    at debugCheckNoChangesNode (services.ts:387) [angular]
    at debugCheckRenderNodeFn (services.ts:330) [angular]
    at Object.eval [as updateRenderer] (AppComponent.html:1) [angular]
    at Object.debugUpdateRenderer [as updateRenderer] (services.ts:307) [angular]
    at checkNoChangesView (view.ts:368) [angular]
    at callViewAction (view.ts:694) [angular]
    at execComponentViewsAction (view.ts:644) [angular]
    at checkNoChangesView (view.ts:368) [angular]
    at callWithDebugContext (services.ts:645) [angular]

Expected behavior
NaN should be handled by | async without breaking change detection.

Minimal reproduction of the problem with instructions

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{ name$ | async }}</h1>`
})
export class AppComponent { 
  name$ = Observable.of(NaN); 
}

Plunkr: https://plnkr.co/edit/Dc6jwz?p=preview

What is the motivation / use case for changing the behavior?
We have various pipes that operate on numbers (to generate friendly and consistent representations) that are loaded asynchronously, so we have quite a few lines that look like:

{{ something$ | async | customPipe }}

Please tell us about your environment:

  • Angular version: 4.0.1

  • Browser: Chrome 57.0.2987.110, IE 11.0.9600.18537

  • Language: TypeScript 2.1.6 (local), 2.2.1 (Plunkr)

DzmitryShylovich added a commit to DzmitryShylovich/angular that referenced this issue Apr 3, 2017

DzmitryShylovich added a commit to DzmitryShylovich/angular that referenced this issue Apr 3, 2017

DzmitryShylovich added a commit to DzmitryShylovich/angular that referenced this issue Apr 3, 2017

@textbook

This comment has been minimized.

Copy link
Contributor Author

commented Apr 3, 2017

@DzmitryShylovich ah that makes sense, NaN !== NaN. Thanks for getting on this so fast!

@yiochen

This comment has been minimized.

Copy link

commented Apr 6, 2017

I have a similar issue as this. Seems like unwraping a WrappedValue will cause ExpressionChangedAfterItHasBeenCheckedError. I have a very simple plunker at http://plnkr.co/edit/yZtZjYrypmIQHQyFdukX

@fatsu

This comment has been minimized.

Copy link

commented May 12, 2017

Any news on when this will be fixed/scheduled?

@victornoel

This comment has been minimized.

Copy link
Contributor

commented Jun 30, 2017

Yep, any news on that? Since angular 4.2 change detection warnings are more precise and this issue arises much more often I think :)

@victornoel

This comment has been minimized.

Copy link
Contributor

commented Jul 6, 2017

@tbosch is this planned to be fixed? :)

@victornoel

This comment has been minimized.

Copy link
Contributor

commented Jul 16, 2017

The problem with wrapped values is well explained in #18129, though I'm not 100% sure this issue is only about that...

@ngbot ngbot bot added this to the Backlog milestone Jan 23, 2018

trotyl added a commit to trotyl/angular that referenced this issue Feb 19, 2018

trotyl added a commit to trotyl/angular that referenced this issue Feb 19, 2018

@trotyl trotyl referenced this issue Feb 19, 2018

Closed

fix(common): properly check NaN value #22305

2 of 3 tasks complete

trotyl added a commit to trotyl/angular that referenced this issue Mar 16, 2018

trotyl added a commit to trotyl/angular that referenced this issue Mar 16, 2018

trotyl added a commit to trotyl/angular that referenced this issue Oct 15, 2018

trotyl added a commit to trotyl/angular that referenced this issue Apr 16, 2019

trotyl added a commit to trotyl/angular that referenced this issue Apr 18, 2019

@benlesh benlesh closed this in 3f6bf6d Apr 20, 2019

trotyl added a commit to trotyl/angular that referenced this issue Apr 22, 2019

BioPhoton added a commit to BioPhoton/angular that referenced this issue May 21, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.