web-dev-qa-db-ja.com

angular（2）通貨パイプに、値がintまたはfloatではない文字列の場合にそのまま表示するように指示する方法

通貨パイプは、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によって起こっていません。

angularangular2-pipe
5
Aniruddha Das

マニュアル は、数式のみを受け入れることを明示的に示しています。

number_expression |通貨[：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;
    }
  }
}

CurrencyPipeをDIから注入するには、モジュールプロバイダーに追加する必要があります。

declarations: [LooseCurrencyPipe, ...],
providers: [CurrencyPipe, ...],
6
Estus Flask

三項演算子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>

ライブデモ

11
BeetleJuice