“错误.People /组件类PeopleComponent - 内联模板：93：8导致：错误尝试差异'[对象对象]'”

Question

我能够从我的网络选项卡中显示的数据库中提取数据好吧但我的应用程序提供了一个错误，当我试图在我的表中显示提取的数据。 “在。人们/ Component类PeopleComponent错误 - 联模板：93：8所造成的：错误尝试差异 '[对象的对象]' ”错误显示“，”

//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>