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.

間違っているものに私を助けてください。

参照のため、

<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" 
    }, 
] 
} 

ですべての問題ならば、私はわからない以下のHTML部分を追加

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); 
} 
} 

Answer 1

empdataはオブジェクトであり、配列ではありません。

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>