asynkron - Angular2: Async-pipe for arrayindeks

Jeg har en observabel av streng-arrays const obs$: Observable<string[]> på min komponent som en egenskap. Mens jeg kan bruke async-pipen med hell i en *ngIf-setning, mislykkes pipen når den aksesseres via array-indekser (obs$ | async)[0].

Eksempel :

<!-- 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>

Forekomsten av obs$settes i komponentens konstruktør, så obs$burde ikke være udefinert når malen er databundet.

Hvordan får man riktig tilgang til arrayets elementer i malen?

Svar #1

Dette kan fungere

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

Svar #2

Jeg ville prøvd Elvis-operatøren på dette nivået siden dataene dine er udefinerte i begynnelsen:

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

Relaterte artikler