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;
    });
}

我正在尝试使用异步管道显示此功能的结果，但是我的浏览器崩溃了，内存变得疯狂了。

顺便说一句，如果我在.ts文件中运行此异步函数并将返回结果设置为变量，则代码可以正常工作。

我在这里缺少什么？

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

Answer 1

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

return await this.orderCollection.get()

您需要做的是过滤所需的数据并使用|。异步后言。

在此处详细了解有关角度异步管道的信息：https://angular.io/api/common/AsyncPipe

Answer 2

我有一种感觉，如果删除await关键字可能会起作用，因为我相信异步管道会执行promise ...，而您的函数不会返回promise。尝试输入函数响应，您会看到的。

Angular7异步管道使应用程序崩溃

2 个答案: