Skip to content

AsyncPipe breaks change detection with NaN values #15721

@textbook

Description

@textbook

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)

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions