1. ホーム
  2. angular

Angularの非同期パイプとオブジェクトプロパティ

2023-09-15 02:52:43

質問

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>