web-dev-qa-db-ja.com

Angular async pipe and object property

NgForなしで非同期パイプを使用する必要があります。オブザーバブルで非同期にロードされるオブジェクトのプロパティを確認する必要があります。

これは私が欲しいものですが、動作していません：

 <ion-item *ngIf="user$.anonymouse | async">
     <ion-label>Login</ion-label>
 </ion-item>

//編集：上記のコードを使用するとこのエラーが発生します

例外：[！user $ .anonymouse |のパイプ 'AsyncPipe'の無効な引数 'true' SettingsPage @ 27：22の非同期]

これを解決する方法はありますか？

私はCtrlでこのオブザーバブルをサブスクライブし、値を通常の変数に保存できることを知っていますが、パフォーマンスなどのためにそれをしたくない.

angularionic-frameworkrxjs
37
Daniel Suchý

_*ngIf_ディレクティブはtrueまたはfalseを予期し、結果の式を使用してDOMのHTML要素をレンダリングするかどうかを決定するため、エラーは驚くほど正確です。 。

例外：[！user $ .anonymouse |のパイプ 'AsyncPipe'の無効な引数 'true' SettingsPage @ 27：22の非同期]

使用できる式は_user$.anonymouse_であり、これは真実と評価されますが、残念ながらこのディレクティブでasyncパイプを使用することはできません。 asyncパイプは、たとえば_*ngFor_ディレクティブのスコープ内で結果の出力を公開する入力を "変換"（ "パイプ"とも呼ばれます）します。

パイプは、以下で定義される3つの可能なタイプのいずれかを想定しています（ 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>
_
28
David Pine

@Seanのコメントで述べられているように、*ngIfステートメントは、返されるuser$オブジェクトの結果オブジェクトプロパティanonymouseに基づいている必要があります。など：

<ion-item *ngIf="(user$ | async)?.anonymouse">
     <ion-label>Login</ion-label>
</ion-item>

これは私にとってはうまくいきました。以下は、以下のパイプからの結果を使用する方法の例です。

成分

 message$: Observable<{message: string}>;

  private messages = [
    {message: 'You are my hero!'},
    {message: 'You are the best hero!'},
    {message: 'Will you be my hero?'}
  ];

  constructor() { this.resend(); }

  resend() {
    this.message$ = Observable.interval(500)
      .map(i => this.messages[i])
      .take(this.messages.length);
  }

見る

<h2>Async Hero Message and AsyncPipe</h2>
<p>Message: {{ (message$ | async)?.message }}</p>
<button (click)="resend()">Resend</button>`

実際の例は here にあります。

45
Abdullah Rasheed

これも役に立つと思う：

<!-- This is needed to wait for async pipe to resolve -->
<div *ngIf="user$ | async as user"> 

   <!-- Only on resolve of async pipe -->
   <ion-item *ngIf="user.whateverPropertyYouWantToCheck">
        <ion-label>Login</ion-label>
    </ion-item>
</div>

user$からuserに切り替えたことに注意してください。同じ変数名を使用することもできますが、これにより非同期パイプではなくなっていることがより明確になります。

7
TimNode