管道'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 ..