web-dev-qa-db-ja.com

angular-observable <Object>で非同期パイプを使用し、それをhtmlのローカル変数にバインドする

こんにちは私は多くのプロパティ（名前、タイトル、住所...）で観察可能なuser $を持っています

component{
  user$:Observerable<User>;
  constructor(private userService:UserService){
    this.user$ = this.userService.someMethodReturningObservable$()
  }
}

HTMLテンプレートで非同期パイプを使用してサブスクライブし、このようなローカル変数にバインドする方法はありますか

<div #user="user$ | async">
  <h3> {{user.name}}
</div>

コンストラクターでサブスクライブしてからOnLeave/OnDestroyでサブスクライブ解除できることはわかっていますが、非同期パイプを使用できるかどうかに興味がありました。

乾杯

angulartypescriptpipelocal-variablesangular2-observables
30
Han Che

#は テンプレート参照変数 です。 DOM要素に依存し、そのように使用することはできません。

現時点では、ローカル変数はAngularに実装されていません。 このクローズされた問題 は、関連する問題への参照を監視できます。

Angular 4以降、ngIfおよびngForディレクティブの構文が更新され、ローカル変数が許可されました。詳細については、 ngIf reference を参照してください。だからそれは可能です

<div *ngIf="user$ | async; let user">
  <h3> {{user.name}}
</div>

これによりdivラッパー要素が作成され、クローキング動作が提供されるため、?. 'Elvis'演算子は不要です。

余分なマークアップが必要ない場合は、次のように変更できます

<ng-container *ngIf="user$ | async; let user">...</ng-container>

クローキング動作が望ましくない場合、式を真のプレースホルダー値に変更できます。

プレースホルダーは、オブジェクト値の空のオブジェクトにすることができますが、

<div *ngIf="(user$ | async) || {}; let user">
  <h3> {{user?.name}}
</div>

またはプリミティブ値のスペース、

<div *ngIf="(primitive$ | async) || ' '; let primitive">
  <h3> {{primitive}}
</div>
78
Estus Flask

@Bjorn Schijffおよび@estus

の代わりに：

<div *ngIf="(user$ | async) || {}; let user">

行う：

<div *ngIf="(user | async) as user">
24
Wooli Design

次の構文を使用します。

<div *ngIf="(user | async) as user">

注：式の最後に「as user」を追加。

これにより、user $ | asyncが評価し、結果をユーザーの値（非ドルサフィックス）にバインドします。

2
s sharif