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 - 包含$符号。

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

我认为它默认发生在angularjs中，但是在angular2中它不会发生在defalut上。

Answer 1

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

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

<强>组件

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

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

<强>模板

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

live demo

Answer 2

The manual明确声明它接受数字表达式而不是其他：

number_expression |货币[：CURRENCYCODE [：symbolDisplay [：digitInfo]]]

管道为really simple，可以对其进行扩展和使用，而不是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, ...],

如果value是字符串而不是int或float，如何告诉angular（2）货币管道显示的情况

实施例

2 个答案: