Javascript 如何循环通过从RESTAPI获得的响应对象，并在angular 2中的视图中显示数据

我有返回JSON响应的RESTAPI。如何将此数据绑定到angular 2中的视图

[{"lapID":"3445656"},{"lapID":"374657"},{"lapID":"375555"},{"lapID":"3445657"},{"lapID":"3445659"}]

我想在视图中显示这些ID。我试图使用

ngFor指令遍历它。{{lap.lapID}

我得到了这个错误

找不到类型为“object”的不同支持对象“[object]”。NgFor只支持绑定到数组之类的可重用文件

component.ts
从'@angular/core'导入{OnInit，Component}；
从“./temperature.service”；/”导入{TemperatureService}进口服务
从“./Temperature”导入{Temperature}；//导入您的模型
@组成部分({
提供者：[温度服务]，
模板：`

{{device.lapID}}

`    
})
导出类TemperatureComponent实现OnInit{
装置；
错误消息：字符串；
构造函数（私有温度服务：温度服务）{}
恩戈尼尼特（）{
这是getDevices（）；
}
getDevices（）{
this.temperatureService.getDeviceId（）
.订阅(
设备=>
这个。设备=设备，
error=>this.errorMessage=error//存储来自服务器的错误消息接收器
);
}   
}
服务台
从'@angular/Http'导入{Http，Response}；
从“@angular/core”导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
导入'rxjs/add/operator/map'；
导入“rxjs/add/operator/catch”；
从“./Temperature”导入{Temperature}；
@可注射（）
出口级温度服务{
private deviceIDUrl='/api/temperatures/'；//web api的URL
构造函数（私有http:http）{}
//获取访问数据的请求，并从模型中指定可观察类型
getDeviceID（）：可观察{
返回this.http.get（this.deviceidur）
.map（this.extractData）//检查状态代码
.catch（this.handleError）；//检查错误
}
//反应摘录
私有数据（res:Response）{
如果（分辨率状态<200 | |分辨率状态>=300）{
抛出新错误（“错误响应状态：”+res.status）；
}
让body=res.json（）；
返回body.data |{}；
}
//处理错误
私有句柄错误（错误：响应|任意）{
//在现实世界的应用程序中，我们可能会使用远程日志记录基础设施
让errMsg:string；
if（响应的错误实例）{
const body=error.json（）；
const err=body.error | | JSON.stringify（body）；
errMsg=`${error.status}-${error.statusText | |'''}${err}`；
}否则{
errMsg=error.message？error.message:error.toString（）；
}
控制台错误（errMsg）；
返回可观察抛出（errMsg）；
}
}
model.ts
出口级温度{
deviceId:字符串；
}

在组件中

array: any[] = [{"lapID":"3445656"},{"lapID":"374657"},{"lapID":"375555"},{"lapID":"3445657"},{"lapID":"3445659"}]

在模板视图中

<p *ngFor="let item of array">
  {{ item.lapID }}
</p>

{{item.lapID}

在组件中

array: any[] = [{"lapID":"3445656"},{"lapID":"374657"},{"lapID":"375555"},{"lapID":"3445657"},{"lapID":"3445659"}]

在模板视图中

<p *ngFor="let item of array">
  {{ item.lapID }}
</p>

{{item.lapID}

您的错误在

extractData

函数中，您正在返回

body.data

，但是您的JSON不包含

data

对象，而是一个数组，将其更改为仅

body

应该可以工作，因为现在您正在返回一个显然无法迭代的空对象，因此，将返回值更改为body：

 private extractData(res: Response) {
     if (res.status < 200 || res.status >= 300) {
       throw new Error('Bad response status: ' + res.status);
     }
    let body = res.json(); 
    return body || { }; // here
  }

private-extractData（res:Response）{
如果（分辨率状态<200 | |分辨率状态>=300）{
抛出新错误（“错误响应状态：”+res.status）；
}
让body=res.json（）；
返回体| |{}；//此处
}

您的错误在

extractData

函数中，您正在返回

body.data

，但是您的JSON不包含

data

对象，而是一个数组，将其更改为仅

body

应该可以工作，因为现在您正在返回一个显然无法迭代的空对象，因此，将返回值更改为body：

 private extractData(res: Response) {
     if (res.status < 200 || res.status >= 300) {
       throw new Error('Bad response status: ' + res.status);
     }
    let body = res.json(); 
    return body || { }; // here
  }

private-extractData（res:Response）{
如果（分辨率状态<200 | |分辨率状态>=300）{
抛出新错误（“错误响应状态：”+res.status）；
}
让body=res.json（）；
返回体| |{}；//此处
}

您要绑定的对象是什么？下面的示例需要resultsArray可以是Iterable，例如数组，并且result是其中的一个项目：{{result}}没有人可以帮助您获得这些小信息。。。演示如何处理JSON响应和模板…@AJT_82:请查找模板代码绑定NGU的对象是什么？以下示例需要resultsArray是可移植的，例如数组，结果是其中的一项：{{{result}}没有人可以帮助您获取这些小信息。。。展示如何处理JSON响应和模板…@AJT_82:请查找模板代码