Angular ngFor调用返回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找到它。据我所知，它只执行一次。