Angular ng用于调用返回Observable的函数

Question

我正在使用一个函数返回一个Observable，然后在模板中使用异步管道，但是这导致成千上万的网络请求并使浏览器崩溃。 我敢肯定这很明显，但是我是Angular的新手。 我在stackblitz上创建了一个示例：

https://stackblitz.com/edit/angular-mvpknj

<h1>Todos</h1>
<<ul>
  <li *ngFor="let todo of completedTodos | async" >{{ todo.title }}</li>
  <!-- <li *ngFor="let todo of getCompletedTodos() | async" >{{ todo.title }}</li> -->
</ul>

未注释的行可以正常工作，因为它引用的是类变量而不是函数。

如果取消注释使用getCompletedTodo函数的* ngFor，它只会炸毁浏览器。

Answer 1

我认为原因是，在for循环迭代时，对于每次迭代，都会执行方法getCompletedTodo() ，该方法会调用API，并且它将继续发送请求，正如您在浏览器工具中看到的那样，从而使浏览器崩溃。

Answer 2

我修改了一点代码。 您可以在此StackBlitz中找到它。 据我所知，它只执行一次。