パイプ 'DecimalPipe'の無効な引数 'NaN'

Question

AJAXリクエストのいくつかのインスタンスでは、数値ではなく応答として文字列を受け取ります。これにより、私のAngular2パイプが壊れます。

{{stat |番号： '2.1-2'}}}

文字列が存在する場合、パイプを無効にするか変更する方法はありますか？

Answer 1

私はこのために追加の機能が必要だと思います。

はデモのため、このplunkerを参照してください：https://plnkr.co/edit/7eVp2Z99Z47PBWp3eNW4?p=preview

import {Component, NgModule, Pipe, PipeTransform } from '@angular/core' 
import {DecimalPipe} from '@angular/common'; 
import {BrowserModule} from '@angular/platform-browser' 

@Pipe({ name: 'myNumber' }) 
export class MyNumberPipe implements PipeTransform { 

    transform (value: any, args: string) { 
    let pipe = new DecimalPipe(); 
    value = isNaN(value) ? 0 : +value; 
    return pipe.transform(value, args); 
    } 

} 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <div> 
     <h2>Hello {{name}}</h2> 
     {{getNumber('3') | number:'2.1-2'}} 
     <br /> 
     {{getNumber(12) | number:'2.1-2'}} 
     <br /> 
     {{getNumber('NaN') | number:'2.1-2'}} 
     <br /> 
     <br /> 

     {{'3' | myNumber:'2.1-2'}} 
     <br /> 
     {{12 | myNumber:'2.1-2'}} 
     <br /> 
     {{'NaN' | myNumber:'2.1-2'}} 
     <br /> 
    </div> 
    `, 
}) 
export class App { 
    constructor() { 
    this.name = 'Angular2' 
    } 

    getNumber(val: any) { 
    if (isNaN(val)) return 0; 
    return +val; 
    } 
} 

@NgModule({ 
    imports: [ BrowserModule ], 
    declarations: [ App, MyNumberPipe ], 
    bootstrap: [ App ] 
}) 
export class AppModule {} 

またはPipe独自に作成する。..