无法遍历Angular 6中表上的JSON对象答案

【问题标题】：Not able to loop through JSON object on table in Angular 6无法遍历Angular 6中表上的JSON对象
【发布时间】：2018-10-24 16:55:37
【问题描述】：

我从 GET REST 调用收到如下 JSON 对象。

[
{
    "driverName": "Bob",
    "customerName": "-",
    "status": "AVAILABLE"
},
{
    "driverName": "Harry",
    "customerName": "-",
    "status": "AVAILABLE"
},
{
    "driverName": "Peter",
    "customerName": "-",
    "status": "AVAILABLE"
},
{
    "driverName": "John",
    "customerName": "-",
    "status": "AVAILABLE"
},
{
    "driverName": "Rob",
    "customerName": "-",
    "status": "AVAILABLE"
}

]

我想对此进行迭代并以表格格式显示它们。我的代码如下。

AppComponent.ts

driverStatusResponse: any[] = [];

AppService.ts

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

}

还有组件的html：

<tbody bgcolor="#b3ecff">
    <tr *ngFor="let driver of driverStatusResponse">
      <td>{{driver.driverName}}</td>
      <td>{{driver.customerName}}</td>
      <td>{{driver.status}}</td>
    </tr>
  </tbody>

我在控制台中收到如下错误：

AppComponent.html:24 ERROR Error: Error trying to diff '[{"driverName":"Bob","customerName":"kushhs","status":"BUSY"},{"driverName":"Harry","customerName":"aSdjb","status":"BUSY"},{"driverName":"Peter","customerName":"aSdjb","status":"BUSY"},{"driverName":"John","customerName":"zdgf","status":"BUSY"},{"driverName":"Rob","customerName":"asdfsg","status":"BUSY"}]'. Only arrays and iterables are allowed
at DefaultIterableDiffer.push../node_modules/@angular/core/fesm5/core.js.DefaultIterableDiffer.diff (core.js:6194)
at NgForOf.push../node_modules/@angular/common/fesm5/common.js.NgForOf.ngDoCheck (common.js:3386)
at checkAndUpdateDirectiveInline (core.js:10100)
at checkAndUpdateNodeInline (core.js:11363)
at checkAndUpdateNode (core.js:11325)
at debugCheckAndUpdateNode (core.js:11962)
at debugCheckDirectivesFn (core.js:11922)
at Object.eval [as updateDirectives] (AppComponent.html:35)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:11914)
at checkAndUpdateView (core.js:11307)

请帮我解决这个问题。

【问题讨论】：

您是从请求中检索 JSON 对象还是正在定义它？
我从请求中检索到它

标签： html json angular loops typescript

【解决方案1】：

在用代码尝试了不同的东西后，我找到了答案。错误出现在服务调用中。修改后的代码给出了正确的数组进行迭代，

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

这会将响应主体作为 json 数组。

【讨论】：

【解决方案2】：

您的 HTTP API 可能正在返回一个对象 {} - ngFor 需要一个数组 [] 来迭代。

更改您的 API 以生成数组，或转换组件中的对象。

看看您的 API 响应是否以 {} 开头。

对象

{[
    {
        driverName: "John",
        customerName: "-",
        status: "AVAILABLE"
    }    
]}

阵列

[{
   driverName: "John",
   customerName: "-",
   status: "AVAILABLE"
}]

【讨论】：

我的回复是以[]开头的，表示是发送数组吧？
是的，当您收到检查对象结构的响应时，您能否在控制台 console.log(driverStatusResponse) 中打印。
是的，我已经在控制台打印了它，我得到的和我一开始在这里发布的一样
我不知道它是否有效，但尝试像我的示例一样删除属性对象中的“”引号