Аварийная труба 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 и устанавливаю в качестве результата возврата переменную.

Что мне здесь не хватает?

PS Если я заменю этот кодс простым Promise также происходит сбой.

Answer 1

При использовании асинхронного канала нет необходимости использовать:

return await this.orderCollection.get()

Вам нужно отфильтровать нужные данные и использовать |Асинхронные послесловия.

Подробнее об асинхронных трубах в угловом здесь: https://angular.io/api/common/AsyncPipe

Answer 2

У меня такое ощущение, что если вы удалите ключевое слово await, оно может работать, поскольку я считаю, что асинхронный канал выполняет обещание ... и ваша функция не возвращает обещание.Попробуйте ввести ответ функции, и вы увидите это.