代码之家 › 专栏 › 技术社区 › Nick Hodges

如何将ngFor与角度中的可观察对象一起使用?

ngfor observable typescript angular

0

Nick Hodges · 技术社区 · 6 年前

我无法使用*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 返回一个数组,如果我能弄清楚如何将一个可观察的对象转换成数组(如果这有意义的话……)

更新:

我修改了密码,确实而不是 completedTodos

2 回复 | 直到 6 年前

1

Brandon Taylor 6 年前

你的代码基本正确。下面是一个关于 StackBlitz 输出一组可观察到的物体。

我唯一不同的做法就是分配 completedTodos 作为视图模型属性 ngOnInit()

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

[更新]

我更改了示例代码以从以下位置检索TODO列表: https://jsonplaceholder.typicode.com/ 所以它发出了一个实际的GET请求。

2

0

Joe Belladonna 6 年前

你需要 subscribe 为了从中得到任何数据。