Ionic 2 *ngFor not refresh by promise in promise (in promise)

Posted 2023-03-13

【中文标题】Ionic 2 *ngFor not refresh by promise in promise (in promise)

【英文标题】：Ionic 2 *ngFor not refreshing by promise in promise (in promise)

【发布时间】：2017-05-02 14:29:52

【问题描述】：

我正在尝试在我的 Ionic 2 应用程序中加载一些消息，并将它们存储在 SqLite db 中以避免多次下载它们。

所以基本上我会询问我的 Sqlite 保存的最后一个 ID，然后询问服务器所有比该 ID 更新的消息，然后用保存的消息填充板，直到我达到 20 条消息（显然只有一次调用）。

所以技术部分：我将所有这些消息放在一个数组中，应该在应用程序中显示一个 *ngFor。当我在 PC 上运行应用程序时，它显示正确（因此逻辑是正确的），但是当我在电话上运行应用程序时，就像 *ngFor 没有刷新并且消息没有显示一样。

顺便说一句，并非总是如此。如果我卸载页面，我会暂时看到消息（数组最终显示在 *ngFor 中），如果我再次加载它，它会显示它们（不是因为现在它们已保存，而是因为它们已经在某个缓存中我想想）。

答案是：我缺少的 *ngFor 有一个限制？我怎样才能让消息始终显示？我已经将消息限制从 100 降低到 20，但它并没有解决问题。

这是代码，包含三个承诺：

getMessages() this.dbService.getLastMessageId().then((data) =>

  let lastId = 0;     
  if (data.res.rows.length > 0)
    lastId= data.res.rows.item(0).Id;


    this.http.get(URL+lastId)
      .subscribe(data => 

      var response = data.json();
      let newMessagesCount = response[0].count;
      for (let i =1; i<=newMessagesCount; i++)
        this.messages.push(response[i]);

      if (newMessagesCount <20)
        this.dbService.getOldChatMessages(20-newMessagesCount).then((data) =>  

      if (data.res.rows.length > 0)
        let rowsCount = data.res.rows.length;
        for (let i=0; i<rowsCount;i++)
          let newElement = 
            Name: data.res.rows.item(i).Name,
            Date: data.res.rows.item(i).mexDate,
            Text: data.res.rows.item(i).mexText,
            Id: data.res.rows.item(i).Id,
            New: 0
            ;
          this.messages.push(newElement);

                          
      
     //HERE I EXPECT THE ARRAY TO BE READY
      if(newMessagesCount>0)
        this.dbService.storeNewChatMessages(response);                    
        
      );
    );
  );

【参考方案1】：

尝试将你的 for 循环放在这样的区域中：

import  NgZone  from '@angular/core';

export class MyPage 
  zone: NgZone;

  constructor() 
    this.zone = new NgZone(enableLongStackTrace: false);
  

  getMessages() 

    this.zone.run(() => 
      for (let i =1; i<=newMessagesCount; i++) 
        this.messages.push(response[i]);
      
    );

    this.zone.run(() => 
      for (let i = 0; i < rowsCount; i++) 
        let newElement = 
          Name: data.res.rows.item(i).Name,
          Date: data.res.rows.item(i).mexDate,
          Text: data.res.rows.item(i).mexText,
          Id: data.res.rows.item(i).Id,
          New: 0
        ;

        this.messages.push(newElement);
      
    );
  

【讨论】：

感谢您的回答，但它不起作用。根据您的建议，现在在 pc 上可以像以前一样工作，但在我的 android 设备上，它不再进入该页面（当应用进入该页面时，该方法被调用一次）

您使用的是哪个版本的 Ionic？并且在设备上运行并打开页面有没有js错误？

Ionic 2 rc.3，我在设备上看不到js错误

你可以通过chrome中的chrome://inspect/访问你的android设备的js控制台

我不知道这种可能性。顺便说一句，我可以看到设备并查看我是否打开 Chrome，但是当我在设备上的应用程序中时，控制台只会显示“未检测到浏览器”。