Как исправить ошибку ERROR: не удается найти другой поддерживающий объект типа «[объект]].NgFor поддерживает только привязку к итерациям, таким как массивы

Question

Поэтому я пытаюсь отобразить массив с помощью * ngFor в HTML, но когда вы используете observable, он вернет объект из API. У меня вопрос, как я могу отобразить его в HTML?

Я пытался включить .results за объектом, но он все еще не работает.

HTML-компонент

 <ul class ="peoples"> 
      <li class="peopleList" *ngFor="let eachPeople of peoples.results" >
       Name: {{eachPeople.name}} <br>
      </li> 
  </ul>

Компонент TypeScript

public peoples: PeopleList = new PeopleList([]);
  public clientMessage: ClientMessage = new ClientMessage('No peoples to display.');
  constructor(private peopleService: PeopleService, private planetService: PlanetService, private starshipService: StarshipService) { }
  findAllPeople(): void{
    console.log("Work");
    this.peopleService.findPeopleById()
    .subscribe( 
      data => {this.peoples = data,
      console.log(this.peoples)},
      responseError => this.clientMessage = responseError.error
    );
  }

Сервисный файл

@Injectable()
export class PeopleService {
  constructor(private http: HttpClient) { }
  public findPeopleById(): Observable<PeopleList> {
    return this.http
            .get(`${USER_URL}/findPeople`)
            .catch(this.handleError);
  }
  private handleError(response: Response) {
    return Observable.throw(response);
  }

Объект