Ошибка при попытке diff '[object Object]'. Только массивы и итерации допускаются в угловых

Question

Я пытаюсь отобразить данные на внешнем интерфейсе, но получаю вышеуказанную ошибку. Как решить эту проблему?

service.ts

rec_source(){
    var headers = new HttpHeaders().set('Authorization', 'Token ' + localStorage.getItem('usertoken'));
    headers.append('Accept', 'application/json');
    var options =  {
      headers: headers
  };
  return this.httpClient.get('api/recruit/fetch_recruitment_details',options)
  }

component.ts

sources:any = [];

constructor(private Authentication:AuthService) { }

ngOnInit() {

this.Authentication.rec_source()
  .subscribe(source => {
    this.sources = source;
  });
}

component.html

<table *ngIf="sources" class="row-border hover">
<thead>
  <tr>
    <th>Data</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let source of sources">
    <td>{{ source}}</td>
  </tr>
</tbody>
</table>

// данные, которые должны отображаться

// ошибка

Answer 1

Ваш ответ API не является массивом или повторяемым, это то, что говорит ошибка. Это объект, который не повторяется с *ngFor. Может быть, вы хотели повторить data_candidate_source или data_new_hiredate. В таком случае вам нужно назначить правильное свойство для вашего source свойства в компоненте:

this.sources = source.data_candidate_source

Или, если вы хотите перебрать объект, вы можете использовать недавно добавленный keyvalue pipe .