0

I have a binding to a variable:

<span *ngIf="myVoltage && myVoltage>=0" > - {{myVoltage | number: '.0-0'}}</span>

According to the documentation:

ngIf
Removes or recreates a portion of the DOM tree based on an {expression}.

'myVoltage' is null because it gets retrieved from the server, hence if {{myVoltage | number: '.0-0'}} executed it would throw some kind of null exception. That is why I have it in a span:

<span *ngIf="myVoltage && myVoltage>=0" >...</span>

However it STILL executes the binding and formatting on the object inside the span EVEN though it shouldn't because the span should not be visible!

EXCEPTION: null is not an object (evaluating 'new Intl.NumberFormat(e,u)')

If I remove the | number: '.0-0' then it will display fine. However as-is the null exception actually causes the binding to break and then it will NEVER display even when the value is not null any more.

My setup information:

Cordova CLI: 6.2.0
Ionic Framework Version: 2.0.0-rc.1
Ionic CLI Version: 2.1.8
Ionic App Lib Version: 2.1.4
Ionic App Scripts Version: 0.0.30
ios-deploy version: 1.9.0
ios-sim version: 5.0.11
OS: macOS Sierra
Node Version: v6.7.0
Xcode version: Xcode 8.1 Build version 8B62

"dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/compiler-cli": "0.6.2",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/platform-server": "2.0.0",
    "@ionic/storage": "1.0.3",
    "ionic-angular": "2.0.0-rc.1",
    "ionic-native": "2.0.3",
    "ionicons": "3.0.0",
    "moment": "2.14.1",
    "ng2-translate": "3.0.0",
    "rxjs": "5.0.0-beta.12",
    "zone.js": "0.6.21"
  },
  "devDependencies": {
    "@ionic/app-scripts": "0.0.30",
    "i18next-conv": "3.0.3",
    "typescript": "2.0.6"
  },

I have also tried:

*ngIf="!!busVoltage && busVoltage>=0"
[ngIf]="busVoltage && busVoltage>=0"

EDIT 1

So according to the Angular 2 documentation this is the right way of doing things:

<!-- because of the ngIf guard
nullHero.firstName never has a chance to fail -->
<div *ngIf="nullHero">Hello, {{nullHero.firstName}}</div>

EDIT 2

So according the source code:

/**
* WARNING: this pipe uses the Internationalization API.
* Therefore it is only reliable in Chrome and Opera browsers. For other browsers please use an
* polyfill, for example: [https://github.com/andyearnshaw/Intl.js/].

And according to this answer I need to add the "intl" library, but I have used NPM, and I am not sure where to put the following:

import 'intl';
import 'intl/locale-data/jsonp/en';
Community
  • 1
  • 1
Quintin Balsdon
  • 5,484
  • 10
  • 54
  • 95

1 Answers1

1

We had a similar issue, which we resolved with the following workaround: We implemented a custom pipe which used JavaScript's native formatting:

if(value === null) {
    return "";
}
Intl.NumberFormat().format(value);

The elegance of this is that we removed the burden of formatting from the view plus I think in your case it will remove the pipe chaining.

JackFinch
  • 48
  • 6