Angularの非同期パイプとオブジェクトプロパティ
質問
ngForを使わずに非同期パイプを使用する必要があります。observableで非同期ロードされたオブジェクトのプロパティをチェックする必要があります。
これは私が欲しいものですが、動作しません。
<ion-item *ngIf="user$.anonymouse | async">
<ion-label>Login</ion-label>
</ion-item>
//EDIT:上記のコードを使用すると、このエラーが発生します。
EXCEPTION: Invalid argument 'true' for pipe 'AsyncPipe' in [!user$.anonymouse | async in SettingsPage@27:22].
これを解決する方法はありますか?
Ctrlでこのobservableを購読し、通常の変数に値を格納することができるのは知っていますが、パフォーマンスなどの理由でそうしたくありません。
どのように解決するのですか?
というエラーは意外と正確です。
*ngIf
ディレクティブが期待するのは
true
または
false
をレンダリングするかどうかを決定するために、結果の式を使用します。
HTML
要素をレンダリングするかどうかを決定します。
EXCEPTION: Invalid argument 'true' for pipe 'AsyncPipe' in [!user$.anonymouse | async in SettingsPage@27:22 ]。
あなたが持っている式は
user$.anonymouse
で、これは真理と評価されますが、残念ながら
async
パイプを使うことはできません。このディレクティブの
async
パイプは入力を変換し (パイプとも呼ばれます)、 その結果の出力を
*ngFor
ディレクティブの範囲内で、結果の出力を公開します。
パイプは、以下で定義される 3 つのタイプのうちの 1 つを期待します ( AsyncPipeについての詳細 ):
transform(obj: Observable<any>| Promise<any>| EventEmitter<any>)
これを解決する方法はあるのでしょうか?
はい、設計通りに使用することもできます。例えば
*ngFor
ディレクティブの中で使うことができます。
<ion-item *ngFor="(user$ | async)?.anonymouse">
<ion-label>Login</ion-label>
</ion-item>
には必要ないので、配管を完全に削除することもできます。
*ngIf
ディレクティブに必要ないからです。
<ion-item *ngIf="user$.anonymouse">
<ion-label>Login</ion-label>
</ion-item>
関連
-
[解決済み] ngModel' は 'input' の既知のプロパティではないため、バインドできません。
-
[解決済み] Angular HTMLバインディング
-
[解決済み] Angular/RxJS `Subscription` からいつ退会すればいいのか?
-
[解決済み】PromiseとObservablesの違いは何ですか?
-
[解決済み] 角度2 ngfor 最初、最後、インデックスループ
-
[解決済み] .tsファイルはTypeScriptのコンパイルの一部ですが、使用されていませんという警告を消すには?
-
[解決済み] angular-cli が HTTPS で ng serve するようにする。
-
[解決済み] ngForとAsync Pipe Angular 2でObservableオブジェクトから配列を利用する。
-
[解決済み] コンポーネントではなくクラスにサービスをインジェクトする方法
-
[解決済み] mat-selectでデフォルトのオプションを設定する
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] Angular 4/5/6 グローバル変数
-
[解決済み] Angular / Angular Materialでmat-horizontal-stepperのステップをプログラムで移動させることは可能ですか?
-
[解決済み] RxJSのmap演算子でエラーを出す方法 (angular)
-
[解決済み] Angular2 formGroupに値を設定する
-
[解決済み] Angular 2で送信後にフォームをクリアするには?
-
[解決済み] Angular 4.3 - HttpClient set params
-
[解決済み] Angular : ルートへの手動リダイレクト
-
[解決済み] Angular Material 2 ネストされたオブジェクトによるデータテーブルのソート
-
[解決済み] Angular2のTypescriptで文字列を日付に変換するには?重複
-
[解決済み] 親コンポーネントのangular2呼び出し関数