javascript - Angular2 : *ngFor, AsyncPipe 和索引

Question

在上一个问题中 here ，我试图仅在日期在 2 条消息之间发生变化时才显示日期。

区别在于我现在连接到一个实时数据库 (Firebase)，所以我订阅了数据源并在通过索引和 *ngIf 之前通过异步管道传递它:

<div *ngFor='let message of (chat | async) ; let i = index'>
    <button *ngIf="i == 0 || (message.timestamp | date: 'ddMMMMyyyy') != ((chat | async)[i-1].timestamp | date: 'ddMMMMyyyy')">
        {{ message.timestamp | date:'ddMMM' }}
    </button>
    ...
    <!--More html elements below (omitted)-->
    ...
</div>

这在我第一次加载 View 时效果很好，但是，如果我将新条目推送到 chat 中，我会收到以下错误:

TypeError: 无法读取 null 的属性“0”

也许我不太确定异步管道是如何工作的，但是当我尝试返回 {{ (chat | async).length }} 时，它按预期工作。关于解决方法/正确做法的任何建议？

Answer 1

万一其他人发现这个，因为它是第一个带有关键字的结果，我可以像这样用异步管道获得 *ngFor 的索引(假设 messages 是一个 Observable of一个可迭代的):

<div *ngFor="let message of (messages | async); let i = index;">