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 · 7 comments
Closed

AsyncPipe breaks change detection with NaN values #15721

textbook opened this issue Apr 3, 2017 · 7 comments
Labels
area: common Issues related to APIs in the @angular/common package freq1: low type: bug/fix
Milestone

Comments

@textbook
Copy link
Contributor

textbook 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
Copy link
Contributor Author

textbook commented Apr 3, 2017

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

@yiochen
Copy link

yiochen 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

@tbosch tbosch added area: core Issues related to the framework runtime freq1: low severity3: broken type: bug/fix labels Apr 10, 2017
@fatsu
Copy link

fatsu commented May 12, 2017

Any news on when this will be fixed/scheduled?

@victornoel
Copy link
Contributor

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
Copy link
Contributor

@tbosch is this planned to be fixed? :)

@victornoel
Copy link
Contributor

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 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
@pkozlowski-opensource pkozlowski-opensource added area: common Issues related to APIs in the @angular/common package and removed area: core Issues related to the framework runtime labels Mar 5, 2019
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
trotyl added a commit to trotyl/angular that referenced this issue Apr 22, 2019
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 14, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
area: common Issues related to APIs in the @angular/common package freq1: low type: bug/fix
Projects
None yet
6 participants