Javascript ListView仅在上下滚动时刷新

我写了一个聊天应用程序，但问题是如果另一个用户给我写信，消息不会立即加载

只有当我上下滚动时

如果我写了一条消息，它会立即更新

我使用Firebase和Nativescript

TS:

因此，代码将添加到“messages:any[]=[]；”中的每一条新消息追加到后面

HTML:

据我所知，这是UI刷新的问题

聊天服务getChat：

getChat(RoomId){
        return new Promise((resolve, reject)=>{
            this.ChatCollection.doc(RoomId)
            .get()
            .then(msg => {
                resolve(msg);
            })
            .catch(err=>{
                console.log(err);
                reject(err);
            })
        })
    } 

---

当库中的值发生更改时，UI没有得到更新的问题是因为它运行在Angular的区域之外，这解释了您必须滚动以触发UI更新

解决方法是在调用时将数组包装到

ngZone

内的

ListView

，以确保其在Angular的区域内运行

从'@angular/core'导入{NgZone}；
构造函数（专用ngZone:ngZone）{}
this.unsubscribe=this.\u chatService.ChatCollection
.doc（chat.id）
.onSnapshot（文档=>{
//新的
此.ngZone.run（（）=>{
试一试{
var lastElement=doc.data（）.messages[doc.data（）.messages.length-1]；
lastmelement.time=this.datePipe.transform（lastmelement.time，'h:mm a'）；
if（this.messages[this.messages.length-1].msg==lastElement.msg）{
}否则{
this.messages.push（lastElement）；
}
}抓住{
控制台日志（“noch keine Nachricten verfasst项目详细信息组件”）
}
});
}); 

谢谢。这就是答案。但是你怎么知道的。比如我怎样才能获得这些知识？我必须阅读完整的文档吗？因为我永远也猜不到。但再次感谢您经常遇到第三方库更新后不更新DOM的问题-很可能是区域问题：）

<ActionBar>
    <NavigationButton (tap)="onBackTap()" android.systemIcon="ic_menu_back"></NavigationButton>
    <Label [text]="user.name"></Label>
</ActionBar>

<ListView (loaded)="listViewLoaded($event)" class="chat-body" [items]="messages" separatorColor="transparent" style="height: 80%;margin-top: -200px" >
            <ng-template let-message="item" let-odd="odd" let-even="even">
                <GridLayout rows ="auto, *">
                    <Label style="padding-right:150px" *ngIf="message.sender == me" horizontalAlignment="right" class="chat-message-me" [text]="message.msg" textWrap="true"></Label>
                    <Label *ngIf="message.sender == me" horizontalAlignment="right" class="chat-timestamp" verticalAlignment="bottom" [text]="message.time"></Label>
                
                    <Label  style="padding-left:170px" *ngIf="message.sender != me" horizontalAlignment="left" class="chat-message-you" [text]="message.msg" textWrap="true"></Label>
                    <Label *ngIf="message.sender != me" horizontalAlignment="left" verticalAlignment="bottom" class="chat-timestamp" [text]="message.time"></Label>
                </GridLayout>
            </ng-template>
        
        </ListView>
    <StackLayout  class="nt-form chat-wrapper"  >
    <StackLayout loaded="test" id="chat-form" orientation="horizontal" class="nt-input input-field form">
  
   <TextField  
   #TextField
    (textChange)="onTextChange($event)" 
    [text]="inputText"
    width="800px"  
    class="-rounded-lg input" 
    hint="Nachricht" 
    style="background-color: #ffffff;"
></TextField>
        <button width="120px" class="-rounded-lg fa far fas fab" (tap)="sendMessage();" style="margin-left: 15px;" text="&#xf1d8;"></button>
    </StackLayout>
</StackLayout>

System.err: An uncaught Exception occurred on "main" thread.
System.err: The content of the adapter has changed but ListView did not receive a notification. Make sure the content of your adapter is not modified from a background thread, but only from the UI thread. Make sure your adapter calls notifyDataSetChanged() when its content changes. [in ListView(4, class android.widget.ListView) with Adapter(class com.tns.gen.android.widget.BaseAdapter_vendor_126974_28_ListViewAdapter)]
System.err:
System.err: StackTrace:
System.err: java.lang.IllegalStateException: The content of the adapter has changed but ListView did not receive a notification. Make sure the content of 
your adapter is not modified from a background thread, but only from the UI thread. Make sure your adapter calls notifyDataSetChanged() when its content changes. [in ListView(4, class android.widget.ListView) with Adapter(class com.tns.gen.android.widget.BaseAdapter_vendor_126974_28_ListViewAdapter)]       
System.err:     at android.widget.ListView.layoutChildren(ListView.java:1717)
System.err:     at android.widget.AbsListView$CheckForTap.run(AbsListView.java:3490)
System.err:     at android.os.Handler.handleCallback(Handler.java:938)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:99)
System.err:     at android.os.Looper.loop(Looper.java:223)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7656)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:592)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:947)

getChat(RoomId){
        return new Promise((resolve, reject)=>{
            this.ChatCollection.doc(RoomId)
            .get()
            .then(msg => {
                resolve(msg);
            })
            .catch(err=>{
                console.log(err);
                reject(err);
            })
        })
    }