管道'DecimalPipe'的参数'NaN'无效

Question

在AJAX请求的某些实例中，我得到一个字符串作为响应，而不是一个数字。这会导致我的Angular2管道破裂。

{{stat | number:'2.1-2'}}

是否有一种方法来禁用或更改管道，如果字符串存在?

Answer 1

我想你需要一个额外的函数。

查看这个柱塞的演示: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 ..

Answer 2

仅使用三元运算符就解决了类似的情况:

{{stat ? stat : 0}} 

请注意，我正在接收未定义的，而不是字符串。