".People/ComponentクラスのエラーPeopleComponent - インラインテンプレート：93：8原因： '[オブジェクトオブジェクト]'との比較エラー"

Question

ネットワークタブに表示されているデータベースからデータを取得できました。私のテーブルにフェッチされたデータを表示しようとすると、私のアプリケーションはエラーを出します。 ".People /コンポーネントクラスPeopleComponentでエラーが発生しました - インラインテンプレート：93：8によって引き起こさ：エラーdiffをしようとして '[オブジェクトのオブジェクト]' "エラー表示""

//component 

    export class PeopleComponent { 


     People: Peoples[] = []; 


     constructor(private httpService: HttpService, private router: Router) { 

       this.httpService.getPeople() 
       .subscribe(data => { 
         this.People = data; 
        } 
       ); 

     } 
    //service 
    getPeople() { 
      let headers = new Headers({ 'Authorization': 'Bearer ' + this.auth.token }); 
      let options = new RequestOptions({ headers: headers }); 
     return this.http.get('http://example.com', options) 
      .map((response:Response) => response.json()); 
     } 


    //table 

    <table class="table" id="table" > 

     <tr> 
     <th>#</th> 
     <th>Group</th> 
     <th>Country</th> 



     </tr> 

     <tbody> 
     <tr *ngFor="let people of People" > 
      <td>{{people.group}}</td> 
      <td>{{people.country}}</td> 

      </tr> 

     </tbody> 
    </table> 

// updated table 

    <tbody> 
     <tr *ngFor="let key of People | keys; let i = index" > 
      <td>{{i + 1}}</td> 

     <td>{{People[key].first_name + " " + People[key].last_name}}</td> 
      <td>{{People[key].group}}</td> 
      <td>{{People[[key].country}}</td> 


</tr> 

     </tbody> 

//pipe.ts

import { Pipe, PipeTransform } from '@angular/core'; 

@Pipe({name: 'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value) : any { 
     if(value) { 
      return Object.keys(value) 
     } 
    } 
} 

//画像

Answer 1

*ngForは配列のみではなく、任意のクラスを反復処理をサポートしています。

@Pipe({name: 'keys'}) 
export class KeysPipe implements PipeTransform { 
    transform(value) : any { 
    if(value) { 
     return Object.keys(value) 
    } 
    } 
} 

<tr *ngFor="let key of People | keys " > 
     <td>{{People[key].group}}</td> 
     <td>{{People[key].country}}</td> 

     </tr> 

    </tbody>