如何在 Angular 中将 ngFor 与 Observable 一起使用？

Question

我在使用 *ngFor 从我的可观察对象发出数据时遇到问题。

我的数据服务中有以下调用：

    completedTasks(): Observable<Array<Todo>> {
       return this.aHttpService.get<Array<Todo>>(
              'http://localhost:3000/todos?complete=true');
    }

然后，我有这个属性来获取数据：

  get completedTodos(): Observable<Array<Todo>> {
     return this.todoDataService.completedTasks();
  }

然后，我使用下面的HTML来获取数据：

 <li *ngFor="let todo of completedTodos | async" >
   ... stuff here
 </li>

但是，虽然我可以通过 Postman 看到 API 调用中有 JSON，但我的列表中没有任何内容。

我很乐意调用 completedTasks return 一个数组，如果我能弄清楚如何将一个可观察对象转换为一个数组（如果这甚至有意义....）

更新：

我更改了代码，确实有 completedTasks 而不是 completedTodos（谢谢），现在我得到：

Answer 1

您需要 subscribe 一个 observable 才能从中获取任何数据。

Answer 2

你的代码基本正确。这是 StackBlitz 上的一个工作示例，它输出对象的 Observable 数组。

我唯一不同的是在 ngOnInit() 期间将 completedTodos 指定为视图模型属性。这可以防止在每个更改检测周期创建可观察对象。

或者，如果您想使用 getter，您可以使用 OnPush 的 ChangeDetectionStrategy。

[更新]

我更改了示例代码以从以下位置检索待办事项列表：https://jsonplaceholder.typicode.com/ 因此它发出了实际的 GET 请求。

如何在 Angular 中将 ngFor 与 Observable 一起使用？

How do I use ngFor with an Observable in Angular?

observable

typescript

ngfor

angular