*ngIf mit mehreren asynchronen pipe Variablen

Versucht, das kombinieren von zwei observablen in einem *ngIf und zeigen Sie die Benutzeroberfläche, wenn beide emittiert.

Nehmen:

<div *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
    <b>{{userLanguage.language}}</b> and <b>{{userLanguage.user}}</b>
</div>

Aus: Putting zwei async-Abonnements in einem Winkel *ngIf-Anweisung

Diese arbeitet so weit wie es kompiliert wird, aber in meinem Fall language$ und user$ wäre aus zwei HTTP-requests und es scheint user$ wirft runtime-Fehler, wie TypeError: _v.context.ngIf.user is undefined.

Im wesentlichen, was ich wirklich will ist (dieser funktioniert nicht):

<div *ngIf="language$ | async as language && user$ | async as user">
    <b>{{language}}</b> and <b>{{user}}</b>
</div>

Ist die beste Lösung:

  • Abonnieren in der Komponente-und Schreibzugriff auf Variablen
  • Um eine Kombination der beiden observablen in der Komponente mit sagen withLatestFrom
  • Hinzufügen null prüft {{userLanguage?.user}}
InformationsquelleAutor Phil | 2017-11-20
  1. 52

    Dieser Zustand sollte behandelt werden, mit verschachtelten ngIf Richtlinien:

    <ng-container *ngIf="language$ | async as language">
  <div *ngIf="user$ | async as user">
    <b>{{language}}</b> and <b>{{user}}</b>
  </div>
<ng-container>

    Der Nachteil ist, dass HTTP-Anfragen werden durchgeführt in Serie.

    Um Sie zu erfüllen, gleichzeitig und noch language und user Variablen, mehr-Verschachtelung erforderlich:

    <ng-container *ngIf="{ language: language$ | async, user: user$ | async } as userLanguage">
  <ng-container *ngIf="userLanguage.language as language">
    <ng-container *ngIf="userLanguage.user as user">
      <div><b>{{language}}</b> and <b>{{user}}</b></div>
    </ng-container>
  </ng-container>
</ng-container>

    Effizienter Weg, dies zu tun ist, sich zu bewegen-Logik aus dem template zu-component-Klasse an dieser Stelle an und erstellen Sie eine einzelne observable, z.B. mit withLatestFrom

    • Der Letzte Satz in dieser Antwort ist die Antwort! Erstellen Sie eine einzelne beobachtbare in der component-Klasse anstelle von Schachteln!
    InformationsquelleAutor Estus Flask
  2. 5

    Dass ist abhängig, was Sie wollen, aber ich denke, forkJoin Betreiber mit einer geladenen Flagge, könnte eine gute Idee sein.

    https://www.learnrxjs.io/operators/combination/forkjoin.html

    Den forkJoin warten, dass alle Beobachtbaren abgeschlossen sind zurück, Ihre Werte in Ihrer abonnieren

    Observable.forkJoin(
  Observable.of("my language").delay(1000),
  Observable.of("my user").delay(1000),
).subscribe(results => {
  this.language = results[0]
  this.user = results[1]
})

    Können Sie fangen Fehler in der onError-das abonnieren und anzeigen.

    • Es sollte bemerkt werden, dass forkJoin nur abgeschlossen observablen (die Http observablen sind).
    • Ja, das ist, warum ich schrieb, das ist abhängig, was Sie wollen 🙂
    InformationsquelleAutor mickaelw
Schreibe einen Kommentar