Angular 5中HTTP请求获取JSON对象数组及数据处理问题

我来帮你搞定这个问题！首先咱们得弄明白为什么控制台会打印undefined——这都是异步操作的特性搞的鬼！当你在ngOnInit里调用getALLData()后，代码会立刻执行后面的console.log，但此时HTTP请求还在后台跑，subscribe里的赋值逻辑还没触发，所以allData还是初始的空状态，自然显示undefined。

接下来咱们一步步解决两个核心需求：一是正确获取并访问异步数据，二是生成只包含id和title的新数组。

1. 修正异步数据访问问题 #

所有依赖异步数据的操作（比如打印、数组转换）都要放到subscribe的回调函数里，确保只有当请求成功拿到数据后才执行这些逻辑。同时我还修正了代码里的小规范问题，比如组件类名首字母大写、补充服务注入：

import { Component, OnInit, Input } from '@angular/core';
import { ConfigService } from '../services/config.service';
import { FormControl } from '@angular/forms';
import { SelectionModel } from '@angular/cdk/collections';
import { FlatTreeControl } from '@angular/cdk/tree';
import { Observable, BehaviorSubject } from 'rxjs';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit { // 类名首字母大写符合TS规范
  allData: any = [];
  // 新增：专门存储只含id和title的数组
  idTitleList: {id: number, title: string}[] = [];

  // 别忘了注入ConfigService，否则无法调用服务方法
  constructor(private config: ConfigService) {}

  getALLData() {
    this.config.getData().subscribe(
      data => { 
        this.allData = data['data'];
        // 在这里操作数据，确保已经拿到返回值
        console.log('完整数据：', this.allData); // 现在能正常打印了
        // 生成只保留id和title的新数组
        this.idTitleList = this.allData.map(item => ({
          id: item.id,
          title: item.title
        }));
        console.log('转换后的精简数组：', this.idTitleList);
      }, 
      err => console.error('请求出错：', err),
      () => console.log('数据加载完成')
    );
  }

  ngOnInit() {
    this.getALLData();
    // 这里的console.log会在请求完成前执行，所以还是undefined，建议删掉或者移到subscribe里
  }
}

2. 关键细节说明 #

• 异步逻辑顺序：HttpClient.get返回的是Observable对象，只有当调用subscribe且请求成功后，回调函数里的代码才会执行。所以所有依赖异步数据的操作必须放在这个回调内部。
• 数组转换技巧：用Array.map方法遍历原始数组，每个元素只提取需要的id和title字段，生成新数组，既简洁又不会修改原数据。
• 模板使用：如果要在模板里展示转换后的数组，直接用*ngFor遍历idTitleList即可：

<ul>
  <li *ngFor="let item of idTitleList">
    {{item.id}} - {{item.title}}
  </li>
</ul>

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