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

Question

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

{{统计 |编号:'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 ..