Angular 7中如何将响应映射到对象？this.users始终未定义

你遇到的核心问题是**result.json的调用方式错误**，再加上Angular版本升级后HTTP模块的变化，导致this.users一直是undefined。下面分两种情况帮你解决：

1. 旧版Http模块（Angular 4.3之前） #

如果你还在使用旧的Http模块，那么result是一个Response对象，它的json()是一个方法，必须加括号调用才能获取解析后的JSON数据。你现在写的result.json只是引用了这个方法本身，并没有执行它，所以转换后自然是undefined。

修正后的代码：

users: IUser[] = [];
getUserList() {
  this.lus.getUserList()
    .subscribe(result => {
      // 关键：调用json()方法，而不是引用方法本身
      this.users = <IUser[]>result.json();
      console.log(result);
      console.log(this.users);
    }, error => {
      throwError(this.listErrorHandler(error));
    });
}

2. 新版HttpClient模块（Angular 4.3+，推荐使用） #

如果你升级到了较新的Angular版本，官方已经推荐使用HttpClient模块替代旧的Http。这个模块会自动帮你解析JSON响应，所以不需要手动调用json()方法——此时result已经是解析好的JavaScript对象/数组，直接断言类型即可。如果这时候你还调用result.json()，反而会报错，因为result已经不是Response对象，没有这个方法。

修正后的代码：

users: IUser[] = [];
getUserList() {
  this.lus.getUserList()
    .subscribe(result => {
      // HttpClient自动解析JSON，直接赋值并断言类型
      this.users = result as IUser[];
      console.log(result);
      console.log(this.users);
    }, error => {
      throwError(this.listErrorHandler(error));
    });
}

另外建议你同步调整服务中的getUserList方法，让它直接返回类型化的Observable，这样连类型断言都可以省略：

// 服务中的方法示例
getUserList(): Observable<IUser[]> {
  return this.http.get<IUser[]>('/api/users');
}

此时组件里直接写this.users = result;就可以了。

内容的提问来源于stack exchange，提问作者John Baird