Angular2: Async Rohr für Array-Index

Question

Ich habe eine Observable der Zeichenfolge Arrays const obs$: Observable<string[]> auf meiner Komponente als eine Eigenschaft. Während ich die async Pipe auf eine *ngIf Anweisung erfolgreich verwenden kann, schlägt die Pipe fehl, wenn über Array-Indexer (obs$ | async)[0] zugegriffen wird.

Beispiel:

<!-- evaluates the array emmitted by obs$ for truthyness --> 
<div *ngIf="obs$ | async"> 
    <!-- only shown if obs$ emitted an array with length > 0 --> 

    <!-- but this fails with error: Cannot read property '0' of null --> 
    <img [src]="(obs$ | async)[0]"> 
</div> 

Die Instanz von obs $ in der Komponente Konstruktor gesetzt, so obs $ sollte nicht undefiniert sein, wenn die Vorlage dagetenbundenen ist.

Wie kann man auf die Elemente des Arrays in der Vorlage richtig zugreifen?

Answer 1

Ich würde versuchen, den Elvis Operator auf dieser Ebene, da Ihre Daten am Anfang nicht definiert ist:

<img [src]="(obs$ | async)?[0]"> 

Answer 2

Dies könnte

<img [src]="(obs$ | async) ? (obs$ | async)[0] : null">