Angular调用Web API返回空数组 无法将API JSON响应绑定到TypeScript类

• 你没有对HttpClient返回的Observable对象执行订阅操作：Angular的HttpClient请求返回的是冷Observable，只有调用subscribe()方法才会真正发起HTTP请求，你当前仅声明了pipe操作链，没有触发订阅，请求根本没有发出，todoListModel一直保留初始的空数组值。
• 控制台打印时机错误：HTTP请求是异步操作，你将console.log写在异步逻辑外部，同步执行时异步请求还没返回结果，哪怕后续补了订阅逻辑，写在外部的打印也只会输出赋值前的空数组。

修改你的refreshList方法如下：

refreshList(){
  this.http.get<TodoListModel[]>(this.rootUrl+`/todos`).pipe(
    map((data: TodoListModel[])=>{
      // 这里可以加你需要的转换逻辑，没有的话其实可以省略map操作符
      return data;
    }),
    catchError(error=>{
      console.error('接口请求出错：', error);
      return throwError(`Something's wrong`);
    })
  ).subscribe(res => {
    // 异步请求成功后再赋值、打印
    this.todoListModel = res;
    console.log(this.todoListModel);
  })
}

如果你习惯用Promise写法，rxjs7+可以用lastValueFrom包裹Observable来替代代码中你注释掉的已废弃的toPromise方法，普通业务场景下直接使用subscribe写法更简洁。

如果修改后还是拿到空值，可以按以下顺序排查：

1. 打开浏览器开发者工具的「网络」面板，确认/todos接口已经正常发起，检查响应体是否确实有返回数据，排除后端接口本身返回空、路径写错、跨域拦截的问题
2. 确认你的TodoListModel字段名和后端返回的字段完全匹配，大小写也需要一致，避免类型映射时字段识别失败
3. 如果要在组件中使用拿到的todoListModel，建议用Subject或者直接在订阅回调中触发组件的更新逻辑，避免异步时序问题

内容的提问来源于stack exchange，提问作者shubham shaw