Angular - Observables im HTML-Template zusammenfassen

observable

Observables (=Datenströme) sind ein spannendes und zugleich umfangreiches Thema. In Angular-Projekten kommen diese sehr häufig vor. RxJS bietet für das Arbeiten mit Observables nicht nur eine fast unüberschaubare Anzahl an Funktionen und Möglichkeiten. Auch die Dokumentation ist sehr gut und trotzdem übersichtlich. Unter anderem ist das Framework deswegen so mächtig, weil es sehr viele Möglichkeiten gibt, mehrere Observables miteinander in Verbindung zu bringen bzw. zu verketten. Das ist die Paradedisziplin von RxJS. Darum soll es aber in diesen Post nicht gehen. Ich möchte euch einen Weg aufzeigen, wie man mehrere Observables innerhalb eines HTML-Templates mit Hilfe der async-Pipe zusammenfassen kann. Dazu habe ich euch wieder ein lauffähiges Projekt auf GitHub vorbereitet.

​Der nachfolgende Code-Ausschnitt zeigt zwei unterschiedliche Observables. Zu finden in der app.component.ts.

public autos$: Observable<Auto[]> = of([
  { id: 1, name: 'Golf' },
  { id: 3, name: 'Adam' },
  { id: 2, name: 'A Klasse' },
  { id: 4, name: 'Polo' },
  { id: 5, name: 'e-Golf' }
]);
public personen$: Observable<Person[]> = of([
  { vorname: 'Maik' },
  { vorname: 'Simone' }
]); 
Das nun folgende Beispiel ist konstruiert. In der Praxis würde man die zwei Observables einfach getrennt von einander anzeigen. Trotzdem möchte ich zeigen, wie man beide Observables zusammenfassen kann. Gezeigt ist die app.component.html
<ng-container
  *ngIf="{
    autos: autos$ | async,
    personen: personen$ | async
  } as zusammenfassung"
>
  <ul>
    <li *ngFor="let auto of zusammenfassung.autos">
      {{ auto.id }}, {{ auto.name }}
    </li>
  </ul>
  <hr />
  <ul>
    <li *ngFor="let person of zusammenfassung.personen">
      {{ person.vorname }}
    </li>
  </ul>
</ng-container>
 
Das Interessante steckt alles im ng-container Element. Dort befindet sich eine *ngIf Angabe, die beide Observables zusammenfasst und dem daraus entstehenden Objekt den Namen zusammenfassung gibt. Besonders achten muss man auf die zwei async-Pipes. Schließlich sind die Attribute autos$ und personen$ zwei Observables.
Danach kann das Attribut zusammenfassung bentutzt werden, um an den Inhalt der zwei Observables zu kommen. Beide Arrays werden einfach angezeigt.

Berühmte abschließende Worte 

Wie gesagt, das Beispiel ist konstruiert. Hauptsächlich ging es mir darum aufzuzeigen, was überhaupt möglich ist. Auch wenn ich schon über 2 Jahre mit Angular entwickle, habe ich diese Syntax bzw. Möglichkeit lange nicht gekannt. Und so soll es euch auf jeden Fall nicht ergehen.

Habt ihr Fragen? Schreibt mir doch eine E-Mail oder schaut euch das Beispiel auf Github noch einmal an.

By accepting you will be accessing a service provided by a third-party external to https://blog.ordix.de/