如何遍历从 REST API 获得的响应对象并以角度 2 在视图中显示数据

Posted 2023-03-13

【中文标题】如何遍历从 REST API 获得的响应对象并以角度 2 在视图中显示数据

【英文标题】：How to loop through response object obtained from REST API and display data in the view in angular 2

【发布时间】：2017-08-14 18:14:19

【问题描述】：

我有返回 JSON 响应的 rest api。如何将此数据绑定到角度 2 中查看？

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

我想在视图中显示这些 ID。我尝试使用ngFor directive.<div *ngFor="let lap of lapIDS">lap.lapID </div> 循环遍历它，但出现此错误

找不到“object”类型的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

component.ts 
import OnInit, Component from '@angular/core';
import TemperatureService from './temperature.service'; // import service   
import Temperature from './temperature'; // import your model

@Component(

  providers: [TemperatureService], 
  template: `
<ul>   
  <li *ngFor="let device of devices">device.lapID</li>  
</ul>

 `    
)

export class TemperatureComponent implements OnInit

  devices;
  errorMessage: string;

constructor(private temperatureService: TemperatureService)

  ngOnInit()

    this.getDevices();

  

  getDevices()

    this.temperatureService.getDeviceIDS()

      .subscribe(

         devices => 

           this.devices = devices,

         error => this.errorMessage = <any>error // Store error message receiver from server

         );

     



Service.ts
import Http, Response from '@angular/http';

import Injectable from '@angular/core';

import Observable from 'rxjs/Observable';

import 'rxjs/add/operator/map';

import 'rxjs/add/operator/catch';



import Temperature from './temperature';



@Injectable()

export class TemperatureService

   private deviceIDUrl = '/api/temperatures/';  // URL to web API

   constructor(private http: Http)  

   // GET request To access data and specify observable type from model

  getDeviceIDS(): Observable<Temperature[]>

    return this.http.get(this.deviceIDUrl)

     .map(this.extractData) // to check for the status code

     .catch(this.handleError); // to check error

  



  // Extracts from response

  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.data ||  ;

  



  // To handle Error

  private handleError (error: Response | any) 

    // In a real world app, we might use a remote logging infrastructure

    let errMsg: string;

    if (error instanceof Response) 

      const body = error.json() || '';

      const err = body.error || JSON.stringify(body);

      errMsg = `$error.status - $error.statusText || '' $err`;

     else 

      errMsg = error.message ? error.message : error.toString();

    

    console.error(errMsg);

    return Observable.throw(errMsg);

  


model.ts
export class Temperature

  deviceId: string;

【问题讨论】：

你绑定 ngFor 的对象是什么？

下面的例子需要resultsArray是可迭代的，比如数组，result是其中的一个单项： result

没有人可以帮助您了解这些小信息...展示您如何处理 JSON 响应和您的模板...

@AJT_82 : 请找到模板代码

【参考方案1】：

您的错误在您的 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
  

【参考方案2】：

在组件中

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

在模板视图中

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