Angular2：* ngFor，AsyncPipe和index

shinglesmingles 发表于 Dev

带状疱疹

在这里的上一个问题中，我试图仅在2条消息之间更改日期时才显示日期。

区别在于我现在已连接到实时数据库（Firebase），因此我订阅了数据源并在通过index和* 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>

第一次加载视图时，此方法效果很好，但是，如果将新条目推入，则会chat出现以下错误：

TypeError: Cannot read property '0' of null

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

带状疱疹

仍然不确定如何在这里操纵AsyncPipe，但我确实设法找到一种不使用管道的解决方法。我希望在标记为关闭之前等待一个更好的答案。

我在类中订阅了数据源，并在显示数组之前使用for循环操作了数组。

我的问题中的（模板）代码现在变为：

<div *ngFor='let message of messages; let i = index'>
    <button *ngIf="message.isNewDay">
      {{ message.timestamp | date:'ddMMM' }}
    </button>
    ...
    <!--More html elements below (omitted)-->
    ...
</div>

并在控制器中：

private chatid: string //chat id passed from previous screen
private chat: FirebaseListObservable<any>;
private messages: any = [];

constructor(private firebase: FirebaseService,
            private _datepipe: DatePipe) {
}

ionViewLoaded() {
    this.chat = this.firebase.database.list('/chat-messages/' + this.chatid);
    this.chat.subscribe((data) => {
        this.messages = data;
        for (let i: number = 0; i < this.messages.length; i++) {
            if (i === 0)
                    this.messages[i].isNewDay = true;
            else {
                let date1 = this._datepipe.transform(this.messages[i].timestamp, 'ddMMMMyyyy');
                let date2 = this._datepipe.transform(this.messages[i-1].timestamp, 'ddMMMMyyyy');
                if (date1 !== date2)
                    this.messages[i].isNewDay = true;
                else
                    this.messages[i].isNewDay = false;
            }
        }
    });
}