如何告诉angular(2)货币管道显示，如果值是一个字符串，不是int或float

Question

货币管道应该足够智能，可以自动处理string, float, int等。

如果传递的值是string或不是int或float，它应该不做任何事情，并显示传递的值。只有int或float才显示格式化的值。

它在angularJs中发生但在angular(2)中没有发生

如何告诉货币管道在string的情况下进行转义，并在decimal的情况下进行货币格式化。

例子

<div>Money:{{'xxx/vv/cc' | currency:'USD':true:'1.2-2'}}</div>应该显示xxx/vv/cc

<div>Money: {{''11.99'' | currency:'USD':true:'1.2-2'}}</div>应该显示$11.99——$ symbol included.

但这并没有发生。我得到的错误是caused by: Invalid argument 'Included' for pipe 'CurrencyPipe'

我想在angularjs中它是默认发生的，但在angular2中它不是默认发生的。

Answer 1

当a为真时，可以使用三元运算符a ? b : c显示b，否则显示c。

首先在组件中创建一个函数，当值为数字时返回true。

<<p> 组件/strong>

isNumber(e) {return typeof e === 'number'}

然后使用它来确定是将值发送到货币管道还是直接打印它

模板

<div>
    {{ isNumber(money) ? (money|currency:'USD':true:'1.2-2') : money }}  
</div>

现场演示

Answer 2

手册明确指出它只接受数字表达式:

number_expression | currency[:currencyCode[:symbolDisplay[:digitInfo]]]

管道真的很简单，可以扩展和使用，而不是CurrencyPipe，以符合预期的行为:

const _NUMBER_FORMAT_REGEXP = /^(d+)?.((d+)(-(d+))?)?$/;
@Pipe({name: 'currency'})
export class LooseCurrencyPipe extends CurrencyPipe {
  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    if (typeof value === 'number' || _NUMBER_FORMAT_REGEXP.test(value)) {
      return super.transform(value, currencyCode, symbolDisplay, digits);
    } else {
      return value;
    }
  }
}

要创建一个不同名称的新管道，可以将CurrencyPipe注入到自定义管道中:

@Pipe({name: 'looseCurrency'})
export class LooseCurrencyPipe implements PipeTransform {
  constructor(private _currencyPipe: CurrencyPipe) {}
  transform(value: any, currencyCode: string, symbolDisplay: boolean, digits: string): string {
    if (typeof value === 'number' || _NUMBER_FORMAT_REGEXP.test(value)) {
      return this._currencyPipe.transform(value, currencyCode, symbolDisplay, digits);
    } else {
      return value;
    }
  }
}

为了通过DI注入CurrencyPipe，它应该被额外添加到模块提供程序中:

declarations: [LooseCurrencyPipe, ...],
providers: [CurrencyPipe, ...],