是什么导致角度列表重绘以及如何缓解它？

Question

我有一个带有聊天页面的Ionic 4 Angular应用程序。它最多显示50条聊天消息，并具有输入以发送消息。

邮件列表是从Google的Firestore中检索的，并以可观察的形式发送到应用程序。这是我显示消息的方式。

<ion-list class="chat-list">
        <ion-item *ngFor="let msg of messages; let last = last; trackBy: trackByCreated">
            <ion-thumbnail slot="start">
                <img-loader src="{{msg.user?.thumbnail != null ? msg.user?.thumbnail : 'assets/person-icon.svg'}}"></img-loader>
            </ion-thumbnail>
            <ion-label text-wrap>
                <div style="color: gray; height: 30px;">
                    <div class="message-name">{{msg.user?.displayname}}</div>
                    <div class="message-date">{{getDateString(msg.messagedate)}}</div>
                </div>
                <p style="color: black;">{{msg.messagecontent}}</p>
            </ion-label>
        </ion-item>
    </ion-list>

这是您可以看到为每条消息调用的getDateString方法：

getDateString(date: number){
    this.logging("Inside get date string.");

    let d = new Date(date);
    let dn = Date.now();

    //If it's the same day, return just the time string
    if (Math.round(<any>dn/(1000*60*60*24)) == Math.round(<any>d/(1000*60*60*24)))
        return d.toLocaleTimeString('en-US');

    return d.toLocaleString('en-US');
}

按功能跟踪：

trackByCreated(i, msg) {
    return msg.messagedate;
}

这个问题是，即使没有新消息显示，Angular似乎也经常重绘消息列表（根据我登录页面代码的订户，可观察对象没有传输新数据。）。每当我滚动页面，在输入中键入字符或单击页面上的任意位置时，它都会重绘。这是正常行为吗？对getDateString函数的不断调用会破坏性能。

编辑：此外，在初始页面加载时，数据仅传输到页面一次，但列表重绘了20次。那是正常行为吗？

您可以在下面看到所有通话的日志。红色表示输入，蓝色滚动，绿色在屏幕上单击。