問題タブ [angular2-pipe]

angular2のパイプ内でサービスを使用すると同期エラーが発生し、バックエンドから情報が到着する前に、明らかにパイプの「変換」メソッドを実行します

私のコード、file.pip.ts

file.service.ts

あらかじめよろしくお願いします

数値が文字列形式で、文字列に小数点がない場合、Angular 通貨パイプは文字列/整数を通貨形式に変換しません。

金額が 12 で、$12.00 を表示したい場合、「12」が渡されると表示されませんが、12.00 が渡されると正しく機能します。

プランカー

私はいくつかの「もの」を行うカスタムパイプを持っています

次に、モジュールごとに2 つのモジュールModule1,があり、宣言配列は次のようになります。Module2

declarations: [DoSomethingAwesomePipe,...]

アプリケーションを起動すると、次のエラーが表示されます。

metadata_resolver.js:369Uncaught エラー: タイプ DoSomethingAwsomePipe は、2 つのモジュールの宣言の一部です: Module1 と Module2! Module1 と Module2 をインポートする上位のモジュールに DoSomethingAwsomePipe を移動することを検討してください。また、DoSomethingAwsomePipe をエクスポートしてインクルードする新しい NgModule を作成し、その NgModule を Module1 と Module2 にインポートすることもできます。

だから私はそれが説明していることを正確に行いPipesModule、このように設定したモジュールの宣言でa を作成しますdeclarations: [DoSomethingAwesomePipe,...]

Module1次に、このモジュールを両方にインポートするとModule2、次のエラーが発生します。

zone.js:388 未処理の Promise 拒否: テンプレート解析エラー: パイプ 'doSomethingAwesome' が見つかりませんでした ("

私は本当に困惑しています。代わりにインポートをルートモジュールに移動しようとしましたが、どこにも行きませんでした。

どんな助けにも感謝します。

ありがとう

特定のクエリに基づいてオブジェクトの配列を除外するパイプを作成しました。それはうまく機能しますが、可能であれば、入力のキーアップイベントに追加するのではなく、このパイプに直接デバウンス機能を追加したいと考えています。

解決策を探していますが、探しているものに固有のものを見つけることができないようです。

このパイプでこれをどのように実装するかについてのアイデアはありますか?

フォームの 1 つで JQuery 入力マスクを とともに使用して[(ngModel)]いましたが、何らかの理由でそれらが連携しません。いずれかを単独で使用しても問題なく動作しますが、2 つを組み合わせると完全に機能[(ngModel)]しなくなり、新しい入力がコンポーネントに送り返されません。しばらくこれに苦労した後、Angular 2のパイプを使用するのが良い解決策になると考えましたが、これら2つを連携させる方法もわかりません。

パイプをテストするために使用しているコードを次に示します

12345 と入力すると、下の<p>タグに 12,345.00 が表示されます。これはまさに私がフィルター処理したい方法ですが、フィルター処理された金額を入力の下に表示したくないので、入力自体に 12,345.00 を表示させたいのです。同じパイプをngModellike this:に追加すると[(ngModel)]="Amount | number:'1.2-2'"、次のエラーが表示されます。

パーサー エラー: [Amount | 10 列目のアクション式にパイプを含めることはできません。number:'1.2-2'=$イベント]

入力内でパイプ (または入力マスク) を使用するにはどうすればよい[(ngModel)]ですか?

通貨のように表示したい入力があります。小数点以下 2 桁のみを許可し、必要に応じてカンマを自動的に追加しながら数字のみを許可するようにします。基本的に、ユーザーが「12345」と入力すると、入力が自動的に「12,345.00」と表示されるようにします。「12,345」でも構いませんが、「12345.5」と入力すると、「12,345.50」と表示する必要があります。これを達成するためにパイプを使用しようとしていますが、通貨記号を表示したくないため、「数値」パイプを使用することにしました (入力の前にラベルとしてドル記号が既にあります)。

これが私のコードです：

いくつか問題があります。

1. 数値を入力すると、自動的に 10 進数と 2 つの 0 が末尾に追加されますが、これは問題ありませんが、その末尾にカーソルも追加されるため、「55」と入力すると、「55.00」ではなく「55.00」と表示されます。 、「5.01」と表示されます（5.005と解釈してから5.01に丸めると思います）。ユーザーが期待する結果を見ながら自然に入力できるように、カーソルが最後まで行かないようにするにはどうすればよいですか?
2. このフィルターは、実際には入力を小数点以下 2 桁に制限していません。「1234」と入力すると、「1.00234」と表示されます。また、複数の小数点を追加することもできます。小数点以下 2 桁までに制限するにはどうすればよいですか?
3. 間違った入力でこのパイプを壊すのは本当に簡単です。たとえば、ユーザーが文字を入力すると、コンソールに次のようなエラーが表示されます。

パイプ「DecimalPipe」の無効な引数「11.00a」

このエラーの後、フィルターは完全に機能しなくなります。

入力を に設定しtype="number"て 1234 と入力すると、値は 1,234 になりますが、入力が消えて、コンソールに次のメッセージが表示されます。

指定された値「1,234」は有効な数値ではありません。値は次の正規表現と一致する必要があります: -?(\d+|\d+.\d+|.\d+)([eE][-+]?\d+)?

JQuery Inputmask を使用すると、入力の制限/表示に関して必要な結果が得られますが、ngModel が壊れて値が空に設定されるため、誰かがそれを回避する方法を知らない限り、これはオプションではありません。

必要な結果を得るために、パイプに変更を加えることはできますか? どうすればこれを機能させることができますか?