Angular2: Async pipe for array index

Question

I have an observable of string Arrays const obs$: Observable<string[]> on my component as a property. While I can successfully use the async pipe on a *ngIf statement, the pipe fails when accessed via array indexer (obs$ | async)[0] .

Example:

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

The instance of obs$ is set in the component's constructor, so obs$ shouldn't be undefined when the template is data-bound.

How to properly access the array's elements in the template?

Answer 1

这可能有效

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

Answer 2

我会在此级别尝试Elvis运算符，因为开始时您的数据是不确定的：

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