如何在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返回一个数组。

更新：

我更改了代码，实际上的确是用completedTasks代替了completedTodos（谢谢），现在我得到了：

Answer 1

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

我唯一做过的事情是在completedTodos期间将ngOnInit()分配为视图模型属性。这样可以防止在每个更改检测周期创建可观察对象。

或者，如果您想使用吸气剂，则可以使用OnPush的ChangeDetectionStrategy。

[更新]

我更改了示例代码，从https://jsonplaceholder.typicode.com/检索待办事项列表，以便发出实际的GET请求。

Answer 2

您需要subscribe到可观察的位置才能从中获取任何数据。