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

2 回答

• 5

  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, ...],
  

  回复于 2024-05-06T03:49:04+08:00
• 9

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

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

  component

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

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

  template

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

  live demo

  回复于 2024-05-06T03:49:04+08:00