eckig - mit async-Rohr auf beobachtbaren<Object> und binden Sie es an die lokale variable in html

Hallo, ich habe eine beobachtbare user$ mit einer Menge von Eigenschaften (name, Titel, Adresse,...)

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

Gibt es eine Möglichkeit der Verwendung des async-Leitung in der html-Vorlage zum abonnieren es und binden Sie es in eine lokale variable wie diese

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

Ich weiß, kann abonnieren können es im Konstruktor und dann Abmelden in OnLeave/OnDestroy aber ich war nur neugierig, ob ich verwenden könnte, die der asynchronen pipe.

Cheers

InformationsquelleAutor der Frage Han Che | 2017-04-10

  1. 54

    # ist template Referenz-variable. Es unterwürfig DOM-element und kann nicht verwendet werden, wie, dass.

    Lokale Variablen sind nicht implementiert in Eckig als jetzt, diese geschlossene Frage können überwacht werden, Verweise auf Verwandte Themen.

    Seit Eckige 4 die syntax von ngIf und ngFor Richtlinien wurde aktualisiert, damit die lokalen Variablen. Sehen ngIf - Referenz für details. So ist es möglich, das zu tun 

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

    Dadurch wird div wrapper-element und wird cloaking Verhalten, so gibt es keine Notwendigkeit für ?. 'Elvis' - operator.

    Falls kein zusätzliches markup ist wünschenswert, es kann geändert werden, um 

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

    Wenn cloaking Verhalten nicht wünschenswert ist, den Ausdruck können geändert werden, um truthy Platzhalter Wert.

    Platzhalter kann leer sein Objekt für Objekt mit dem Wert, 

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

    Oder einen Raum für die primitiven Wert,

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

    InformationsquelleAutor der Antwort estus

  2. 15

    @Björn Schijff und @estus

    Statt:

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

    Tun:

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

    InformationsquelleAutor der Antwort Wooli Design

  3. 0

    Verwenden Sie folgende syntax:

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

    InformationsquelleAutor der Antwort s sharif

Schreibe einen Kommentar