Asynchronous Angular2：数组索引的异步管道

我在组件上有一个可观察的字符串数组

const obs$：observable

，作为属性。虽然我可以在

*ngIf

语句上成功使用

async

管道，但通过数组索引器

（obs$| async）[0]

访问管道时失败

例如：

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

obs$的实例是在组件的构造函数中设置的，因此当模板是数据绑定时，不应未定义obs$

---

如何正确访问模板中的数组元素？

我将在此级别尝试Elvis运算符，因为您的数据在开始时未定义：

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

这可能有效

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

既不

？

也不

？

（实际的elvis操作员）工作。此外，我不明白为什么在*ngIf块中使用时，

obs$

应该是未定义的。这个问题将在RC.5中解决-请看，我已升级到RC5（昨天发布），但问题仍然存在。猫王接线员？。数组索引也不能使用单个问号。Elvis运算符在处理由可观察对象提供的特定数组索引时不起作用。已经提交了一个-问题将在RC中解决。5本身不是重复的；重复答案中的解决方案仅适用于（使用ngFor）要迭代数组的情况；通过已知的indexIn直接访问数组没有解决方案事实上，我几乎肯定它会起作用，但我在这些问题上找到了一个比三元运算符更优雅的解决方案。但是，我们不能总是为这些细节浪费太多时间，所以我现在就用这个。使用这个建议时要小心，这里有一个非常微妙的警告。两次使用异步管道将创建对基础observable的两个订阅，这可能会导致两个完全不同的流（通常情况下不是这样，但存在边缘情况）。条件

（obs$| async）[0]==（obs$|async）[0]

并非在所有情况下都为真。示例：

const obs$=defer（（）=>[new Date（）.getTime（））]

。