Angular7 异步管道崩溃应用程序

Question

<!-- .html -->
<div class="modal-body">
  {{ doMath() | async }}
</div>

// .ts
async doMath() {
  const res = {};
  return await this.orderCollection.get()
    .then(querySnapshot => {
      querySnapshot.forEach(doc => {
        const data = doc.data();
        data.owners.reduce((acum, cur) => {
          acum[cur] = (acum[cur] || 0) + data.price;
          return acum;
        }, res);
      });
      return res;
    });
}

我正在尝试使用 Async Pipe 显示此函数的结果，但我的浏览器崩溃并且内存不足。

顺便说一句，如果我在 .ts 文件中运行这个异步函数并将 return 结果设置为一个变量，那么代码工作正常。

我在这里缺少什么？

P.S。如果我用简单的 Promise 替换此代码，它也会崩溃。

Answer 1

使用异步管道时无需使用：

return await this.orderCollection.get()

您需要做的是过滤您想要的数据并使用| async后缀。

在 angular 中阅读有关异步管道的更多信息：https://angular.io/api/common/AsyncPipe

Angular7 异步管道崩溃应用程序

Angular7 async pipe crashes application

javascript

angular

promise

es6-promise

angular-promise