問題タブ [angular2-pipe]
For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.
angular - パイプ フィルタの結果を他の要素に再利用する
公式の angular2 pipes documentationの例を見ると、次のことを達成できるかどうか疑問に思います。
ここで、「hasFlyingHeroes」は、flyingHeroes を 2 回除外しないように、ngFor のフィルター処理された値を使用します。
validation - 無効な日付が原因で angular2 アプリがクラッシュするのを防ぎます (おそらく DatePipe をオーバーライドしますか?)
基本的に、次のような HTML5 日付ピッカーがあります。
そして、次のようにモデルからの日付を表示する別の領域:
私はそれがこの質問に関連しているとは思わないが、徹底的にするために、私は舞台裏でこの種のものを持っている:
それは素晴らしいです。もっと多くのことが起こっていますが、それはおそらく余分な詳細になるでしょう.
問題は、日付ピッカーをクリックして、たとえば、年を選択して削除を押すと、次のようになることです。
問題ありませんよね?Angular2 の日付パイプが混乱し、この驚くほど役立つエラー メッセージが表示された後、アプリ全体がクラッシュするためです。
元の例外: パイプ 'DatePipe' の無効な引数 ''
解決策は簡単に思えますが、どうすればよいかわかりません。DatePipe によって処理される前に日付文字列をキャッチし、その日、月、および年の有効なコンテンツがあることを確認するだけでよいと考えています。しかし、Angular2 は魔法のように動作し、モデル バインディングを使用して行われるため、介入への明確なルートはわかりません。
おそらく、DatePipe をオーバーライドして、その機能を維持しながら、最初に文字列をチェックする必要があります。方法がわかりません。その方法を知っている場合は、共有してください。代替アプローチも役に立ちます。日付が不完全なときにアプリをクラッシュさせることはできません。
ありがとう!
angular - 実行時にパイプ名 /metadata を使用してパイプを呼び出す
どのパイプを使用するか (If Any) を実行時に決定する動的テーブルを構築しようとしています。
(簡略化)に似たものを達成しようとしています:
テーブル
この例ではエラーが発生することを理解しています。Reflect は何らかの方法またはその他の解決策として使用できますか?
unit-testing - コンポーネントのテスト時にパイプをモックする方法
現在、プロバイダーをオーバーライドして、次のようなモック サービスを使用しています。
コンポーネントが使用するパイプについても同じことをしたいと思います。試してみprovide(PipeA, { useClass: MockPipeA })
ましprovide(PipeA, { useValue: new MockPipeA() })
たが、どちらもうまくいきませんでした。
javascript - この Angular 2 Pipe がデータを返さないのはなぜですか?
Angular 2.0.0-RC.4 を使用して Angular 2 パイプを構築しています。プロパティ バーに基づいて、Foo の配列として渡されたすべての Foo オブジェクトをフィルター処理する必要があります。デバッガーでコードをステップ実行すると、「allFoo」変数と「bar」変数が入力されます。コンソールで foos.filter() コードをブレークポイントして実行すると、期待どおりの配列が返されます。関数を終了させると、何も返されません。
コードに問題があるのでしょうか、それとも Angular 2 RC4 のバグでしょうか?
タイプスクリプトは次のとおりです。
参考までに、各 Foo オブジェクトは次のようになります。ここで、bars プロパティの配列にはさまざまな文字列が含まれます。
フィルタが適用されるテンプレート ファイルは次のとおりです。
そのテンプレートをロードしてフィルターを使用する Angular クラスを次に示します。
Foo テンプレートとクラスは次のとおりです。
行にブレークポイントを設定すると、console.log(results);
コンソールで次のように入力でき、適切なデータが出力されます。
これを解決するのに役立つ場合は、トランスパイルされた JS を投稿できます。
ありがとう!
asynchronous - 非同期 PipeTransform をテストする
環境
私は基本的な を持っていますがPipeTransform
、それが非同期であるという事実を期待しています。なんで?私は独自の i18n サービスを持っているため (解析、複数形化、およびその他の制約のため、独自に行いました)、次の値を返しますPromise<string>
。
このパイプはうまく機能します。なぜなら、遅延呼び出しは最初のものだけだからです (I18nService
遅延読み込みを使用し、キーが見つからない場合にのみ JSON データをロードするため、基本的に、最初の呼び出しは遅延し、他の呼び出しは即時ですが、それでもまだです)非同期)。
問題
を使用してこのパイプをテストする方法がわかりませんJasmine
。コンポーネント内で動作しているため、動作することがわかっていますが、ここでの目標は、ジャスミンを使用してこれを完全にテストすることです。このようにして、CI ルーチンに追加できます。
上記のテスト:
I18nService
によって与えられた結果が非同期であるため、戻り値が同期ロジックで定義されていないため、失敗します。
I18n パイプ テストは I18n.get を呼び出すことができます。失敗した
「テスト値」は undefined であると予想されます。
編集:それを行う1つの方法は使用することですが、どこにでもsetTimeout
追加するのを避けるために、よりきれいなソリューションが必要です。setTimeout(myAssertion, 100)
angular - Anuglar2 パイプ - コンポーネントのプロパティを使用したフィルタリング
パイプを介してコンポーネント内のプロパティにアクセスできません。
ここに私のパイプがあります:
フィルターを使用するときに HTML でアクセスしようとしているコンポーネントのオブジェクトは次のとおりです。
コンポーネント内でも、フィルター処理しようとしている配列を次に示します。
そして最後に HTML:
基本的に、ユニットを選択すると、配列内のすべてのオブジェクトを、そのユニットが true としてリストした Equip_type で返そうとしています。item.equip_type === "dagger"
andのitem.equip_type === "katana"
部分は IF ステートメントで機能しますが、args[0].dagger == true
and&& args[0].katana == true
は機能していないようです。私が間違っていることを理解できません。引用符の有無にかかわらず試し'unit'
てみましたが、うまくいきませんでした。
angular - 値をパイプに送信する方法は?
これはコードです:
製品カラーをパイプに送ることは可能ですか?undefined
コンソールで印刷するときに取得します。
次のコードのように補間してみましたが、成功しませんでした: