REST APIから取得した応答オブジェクトをループし、角度2のビューでデータを表示する方法

Question

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>を使用してループしようとしました。このエラーが発生します。

「オブジェクト」タイプの異なる[オブジェクトオブジェクト]を見つけることができません。 NgForは、配列などの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; 

} 

Answer 1

あなたのエラーは、body.dataを戻ってきている、あなたのextractData機能であるが、あなたのJSONはdataが含まれていませんオブジェクトですが、配列はbodyに変更するとうまくいくはずです現在明らかに繰り返し、これだけbodyへの復帰を変更することができない空のオブジェクト、帰国RE：

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 
    } 

Answer 2

コンポーネントで

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

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