Angular 6中无法遍历JSON对象并在表格展示的问题求助

我看到你遇到的问题了——你通过GET接口拿到了JSON数组，想在Angular模板里用*ngFor遍历渲染成表格，但控制台抛出了"Only arrays and iterables are allowed"的错误。咱们来一步步解决这个问题：

问题根源 #

先看你AppService.ts里的核心代码：

getDriverStatus():Observable<any>{ 
  var httpUrl = this.baseURL+"driverstatus/"; 
  return this._http.get(httpUrl) 
    .pipe(map((response: Response) => <any> response.text())); 
}

这里的关键问题是你用了response.text()，它会把后端返回的JSON格式响应转换成了纯字符串类型。而*ngFor指令只能遍历数组或者可迭代对象，自然没法处理字符串，所以才会出现"尝试diff字符串"的错误。

解决方案 #

我们需要把响应转换成JavaScript数组，而不是字符串。根据你使用的Angular版本，有两种处理方式：

方式1：使用Angular 4.3+的HttpClient（推荐） #

如果你的项目用的是Angular 4.3及以上版本的HttpClient（注意不是老版本的Http），它会自动帮你解析JSON响应，不需要手动处理：

// AppService.ts
import { HttpClient } from '@angular/common/http';
// ...

getDriverStatus(): Observable<any[]> {
  const httpUrl = `${this.baseURL}driverstatus/`;
  // 直接指定返回类型为数组，HttpClient会自动解析JSON
  return this._http.get<any[]>(httpUrl);
}

方式2：老版本Http模块（用response.json()解析） #

如果你还在使用老版本的Http模块，把response.text()改成response.json()即可：

// AppService.ts
getDriverStatus(): Observable<any[]> {
  var httpUrl = this.baseURL+"driverstatus/"; 
  return this._http.get(httpUrl) 
    .pipe(map((response: Response) => response.json() as any[])); 
}

补充：组件里的订阅逻辑 #

确保你在组件里正确订阅这个服务，并把返回的数组赋值给driverStatusResponse：

// AppComponent.ts
import { Component, OnInit } from '@angular/core';
import { AppService } from './app.service';

@Component({
  // ...组件元数据
})
export class AppComponent implements OnInit {
  driverStatusResponse: any[] = [];

  constructor(private appService: AppService) {}

  ngOnInit(): void {
    this.appService.getDriverStatus().subscribe(
      (data) => {
        this.driverStatusResponse = data;
      },
      (error) => {
        console.error('加载司机状态失败:', error);
      }
    );
  }
}

验证修改 #

做完这些修改后，重新运行项目，控制台的错误应该就消失了，你的表格也能正常渲染出司机的状态数据了。

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