Angular HTTP请求数据已返回但组件无法显示问题排查

你的组件无法显示数据的核心原因是服务层对API响应的解析错误，另外还有异步代码的执行顺序问题，下面分点说明：

1. 修复API响应解析逻辑 #

你的WebAPI返回的是直接的车辆数组：

[ { "Make": "Ford", "Model": "ranger", ... }, ... ]

但在VehicleService的DoRequest方法中，你试图访问response.json().data来获取数据：

.then(response => response.json().data as Vehicle[])

实际上返回的JSON结构里并没有data字段，直接就是数组本身。所以需要修改解析逻辑：

private DoRequest(route: string): Promise<Vehicle[]> {
  return this.httpClient.get(route)
    .toPromise()
    .then(response => response.json() as Vehicle[]) // 去掉多余的.data
    .catch(this.handleError);
}

同样，AddVehicle方法里的response.json().data也需要做类似修改（如果后续用到该方法的话）。

2. 修正异步代码的执行顺序 #

在FetchDataComponent的ngOnInit中，你在Promise的then回调外部执行了日志代码：

ngOnInit(): void {
  this.vehicleService.GetAllVehicles()
    .then(response => this.vehicles = response);
  console.log(this.vehicles.entries.length); // 这里会报错！
}

因为HTTP请求是异步的，console.log会在请求完成前执行，此时this.vehicles还是undefined，会抛出错误。应该把日志代码放到then回调内部：

ngOnInit(): void {
  this.vehicleService.GetAllVehicles()
    .then(response => {
      this.vehicles = response;
      console.log(this.vehicles.length); // 此时才能正确获取数据长度
    });
}

3. 检查FormsModule是否导入 #

你的模板中使用了[(ngModel)]指令：

<input placeholder="Search" [(ngModel)]="searchText" />

如果当前组件所在的模块没有导入FormsModule，这个指令会失效，可能导致组件异常。请确保在模块中添加：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他模块导入
    FormsModule
  ],
  // ...其他配置
})
export class YourModuleName { }

完成以上修改后，重新运行项目，应该就能正常显示车辆数据了。

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