«Ошибка в. Люди/Класс компонента PeopleComponent - встроенный шаблон: 93: 8 вызван: Ошибка при попытке diff '[object Object]'"

Question

Я могу извлечь данные из базы данных, которая отображается на моей сетевой вкладке в порядке но мое приложение дает ошибку, когда я пытаюсь отобразить извлеченные данные в моей таблице. Отображение ошибки "" Ошибка в Люди по достоинству/Компонент класса PeopleComponent - встроенный шаблон: 93: 8, вызванные: ошибка при попытке Diff '[объект Object]' ""

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