Angular 2通过http.get获取后端数组时返回undefined的解决方法

我来帮你搞定这个问题！你遇到的情况是因为Angular旧版的Http服务返回的是Response对象，而不是直接的响应体数据。你需要先从这个Response对象里提取出实际的数组内容。

正确的代码写法： #

constructor(private http: Http) {
  this.http.get('api')
    .subscribe(data => {
      // 调用json()方法解析响应体，得到目标数组
      this.array = data.json();
      console.log(this.array); // 现在就能看到["Item1","Item2","Item3"]啦
    }, error => {
      // 别忘了处理请求出错的情况哦
      console.error('请求失败:', error);
    });
}

额外优化建议： #

如果你的Angular版本是4.3及以上，更推荐使用HttpClient（从@angular/common/http导入），它会自动帮你解析JSON响应，不用手动调用json()方法，代码会更简洁：

// 先在你的模块中导入HttpClientModule
import { HttpClientModule } from '@angular/common/http';

// 组件中注入HttpClient
constructor(private http: HttpClient) {
  this.http.get<string[]>('api')
    .subscribe(data => {
      this.array = data; // 直接赋值即可
      console.log(this.array);
    }, error => {
      console.error('请求失败:', error);
    });
}

另外要注意，subscribe是异步操作，如果你在订阅回调外部直接访问this.array，可能还是会拿到undefined，一定要确保在订阅的回调函数里或者回调执行完成后再使用这个数组哦。

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