web-dev-qa-db-ja.com

Component.jsでパイプを使用するAngular2

Angular2を学習していて、千のコンマ区切り文字を追加して数値をフォーマットしたいと思います。私が読んだ限り、これはPipesを使用して実行できますが、HTMLではなくjsファイルでプログラムによって数値をフォーマットしたいということです（var | numberのように）。

まず最初に、使用できるNumberPipeスタンドアロンパイプがないことに気付きました（間違っている場合は修正してください）。最も類似しているのは@ angular2/commonのCurrencyPipeです。だから私はこのようなものを持っています：

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  templateUrl: 'test.component.html',
  styleUrls: ['./test.component.scss']
})
export class TestComponent {
    public myNumber = 1000;

    constructor(private currencyPipe: CurrencyPipe) {    
        var formatted = this.currencyPipe().transform(this.myNumber, 'MXN', true); // Is this correct?
    }

}

しかし、次のエラーがスローされます：未処理のPromise拒否：CurrencyPipeのプロバイダーがありません！;ゾーン：angular; ...

私は何が間違っているのですか？

前もって感謝します。

よろしく

javascriptangulartypescriptangular2-pipe
9
didi3r

まず、パイプを宣言する必要があります。パイプをNgModule declarationsセクションに追加します。

declarations: [CurrencyPipe]

2つ目：パイプは注入可能ではないため、Angular依存性注入システムを使用してインスタンスを取得することはできません。次のように、このパイプの新しいインスタンスを手動で作成する必要があります。

var formatted = (new CurrencyPipe()).transform(this.myNumber, 'MXN', true);
13
Daniel Kucal

これは実際には@Injectableディスプレイユーティリティサービスで機能し、モジュールに関する以前の回答よりもさらに簡単です。データモデル（下記）とパイプをインポートし、関数を追加するだけです。したがって、マークアップでパイプを直接使用できない場合は、このトリックを使用してください。

export interface MoneyDTO extends SerializableDTO, JsonModelObjectDTO {
  value?: string;
  currency?: string;
}

import { CurrencyPipe } from '@angular/common';

formatMoney(money: MoneyDTO): string {
  const cp: CurrencyPipe = new CurrencyPipe('en-US');

  return money && money.value ? cp.transform(money.value, money.currency || 'USD', 'symbol') : null;
}
0
Rick Levin