Angular2：使用http讀取JSON文件獲取

Question

我正在嘗試使用http get讀取json文件，但是我收到了以下錯誤。

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

請幫我什麼是錯的。

import { Component } from '@angular/core'; 
import { Observable } from 'rxjs/Rx'; 
import { Http, Headers, RequestOptions, Response } from '@angular/http'; 

import { peopleService } from './PeopleService'; 


@Component({ 
selector: 'my-app', 
templateUrl: './app.component.html', 
//providers: [peopleService] 
}) 

export class AppComponent { 
//jsonFile: string = './EmployeeHeader.json'; 
empdata: Observable<Array<any>>[]; 

constructor(private http: Http) { 
    this.http.get('../assets/EmployeeHeader.json') 
     .map(Response => Response.json()) 
     .subscribe(empdata => this.empdata = empdata, error => console.log(error)); 
    //this.empdata = service.getPeople(); 
    //console.log('Data is: ' + this.empdata); 
} 
} 

添加如下，以供參考HTML部分，

<tbody> 
<tr *ngFor="let t of empdata"> 
<td>{{t.wwid}}</td> 
<td>{{t.name}}</td> 
<td></td> 
<td></td> 
<td></td> 
<td>{{t.idsid}}</td> 
<td></td> 
</tr> 
</tbody> 

供大家參考代碼

JSON格式，我不知道是否與此

{ 
"Employee": 
[ 
    { 
    "name": "Karthik Shekhar", 
    "wwid": "11597210", 
    "idsid": "kshekh1x", 
    "costCenterCode": "80790", 
    "mgrWWID": "10693268", 
    "orgUnit": "67926" 
    }, 
    { 
    "name": "Aneesur Rahman", 
    "wwid": "11744439", 
    "idsid": "aneesurx", 
    "costCenterCode": "32406", 
    "mgrWWID": "10693268", 
    "orgUnit": "67926" 
    }, 
    { 
    "name": "Ashutosh Pandey", 
    "wwid": "11691980", 
    "idsid": "ashuto3x", 
    "costCenterCode": "32406", 
    "mgrWWID": "10693268", 
    "orgUnit": "67926" 
    }, 
] 
} 

任何問題

Answer 1

您的empdata是一個對象，而不是一個數組。您需要訪問Employee財產在你的對象：

constructor(private http: Http) { 
    this.http.get('../assets/EmployeeHeader.json') 
     .map(Response => Response.json()) 
     .subscribe(empdata => { 
      //access Employee property 
      this.empdata = empdata.Employee 
     }, error => console.log(error)); 
} 

Answer 2

改變您的服務像下面

this.http.get('../assets/EmployeeHeader.json') 
      .map(Response => Response.json()) 
      .subscribe(empdata => {this.empdata = empdata.Employee} 
    , error => console.log(error)); 

或 變化* ngFor到

<tbody> 
<tr *ngFor="let t of empdata.Employee"> 
<td>{{t.wwid}}</td> 
<td>{{t.name}}</td> 
<td></td> 
<td></td> 
<td></td> 
<td>{{t.idsid}}</td> 
<td></td> 
</tr> 
</tbody>