Angular 4 奇怪的错误：当 - 不 - 显示消息 toast 时查询不会结束答案

【问题标题】：Angular 4 weird error: query doesn't end when -not- showing a message toastAngular 4 奇怪的错误：当 - 不 - 显示消息 toast 时查询不会结束
【发布时间】：2017-08-02 18:01:36
【问题描述】：

这是我整个编程生涯中最奇怪的错误。我一直在努力解决这个问题，但我找不到这段代码发生了什么。这似乎没有任何意义。

我正在使用以下工具：

离子 3
角 4
打字稿/ES6

我正在尝试使用“assignChat(user)”方法将聊天分配给用户。它必须使用几个 API，地理定位……实际上，这是一个很大的方法。这就是为什么我把它分成两部分，用promise连接，然后使用它们，所以我的方法看起来很像这样：

    assignChat(user){
  const getLocationName = () => {
    return new Promise((resolve,reject) => {
      // 30 lines of code
    });
  }
  const assignOrCreateChat= (area) => {
    return new Promise((resolve,reject) => {
      // 40 lines of code
    });
  }
  const getLocationName = () => {
    return new Promise((resolve,reject) => {
      // 30 lines of code
    });
  }


   // then I use the inner functions here and write an extra 60-70 lines of code  
}

好的！这很好用。经过几次测试，这个算法没有太大问题，虽然它很重，需要大约 0.5 秒才能正确执行、完成查询并显示结果。

事情是...我有一些祝酒词显示一些信息，例如您所在的位置。我想删除它们，并从这个开始，在内部函数 getLocationName() 中。这是我想和你谈谈的代码：

const getLocationName = () => {
        return new Promise( (resolve, reject) => {
            const ADDRESS_LEVEL = 2; 
            this.reverseGeocode(ADDRESS_LEVEL).then( address => {
      --->      this.toastify("You have been located at: "+address, 1500);
                let query = new Parse.Query("PoliticalArea");
                // more code

我用箭头标记的线是给我带来问题的线。 我的意思是，你可能认为代码失败是因为这条线，但它完全相反！如果我删除该行，算法会突然停止工作并且无法显示任何结果。

“toastify”方法是我为自己展示 toast 的一种快速方法。它运作良好，实际上！这是实现：

   toastify(message, duration){       
      this.toastCtrl.create({
             message: message,
             duration: duration
      }).present();
   }

不像最危险的方法。好吧，事实上，如果没有它，代码似乎就无法工作。如果我评论或删除它，我不会从我之前向您展示的大算法中得到任何结果或任何错误。我已经捕获了所有可能的异常，虽然 API 连接器没有超时，但是每次不显示 toast 时它就像卡住一样。

我只是不明白发生了什么。在我非常诚实的意见中，Angular 团队似乎应该研究一件非常严肃的事情。

你知道那里有什么样的黑魔法吗？

更新：

一些进一步的信息：当我浏览“错误”视图时（没有 toastify 行，因此不显示聊天结果），例如，单击另一个聊天（将视图推送到导航控制器），它以某种方式开始显示我预期的聊天结果。当我从 navCtrl 弹出新视图并返回页面时，现在可以看到预期的结果。

这是角度手表的问题吗？

【问题讨论】：

很难说清楚，因为并非所有代码都包含在内（可以理解），我对烤面包机的体验是，如果present() 是由一个持有 create({}) 的变量声明的，所以 let toast = ... 然后是 toast.present() 可能是因为它是一个提供者，带有一个 return .. 还有哪个生命周期事件持有这个代码？
@arkade 我不知何故找到了一个解释：如果我把这段代码放在 ionViewDidEnter() 的构造函数中也没关系，所以我认为视图可能正试图由 Angular 呈现在它真正完成任务之前。我马上发布修复程序。

标签： javascript angular typescript ionic-framework

【解决方案1】：

好的，解决方法不明显。

似乎在任务完成之前正在渲染视图。这是一项艰巨的任务，所以也许这就是 Angular 无法正常工作的原因。尝试在构造函数和 ionViewDidEnter() 中执行它，但没有任何效果。

我的最终解决方案是通过 ApplicationRef 强制组件重新渲染，在我的方法的死胡同使用 .tick() 方法。

这一切都解决了！

【讨论】：