Нет данных, видимых при просмотре при запросе к API

Question

Я хочу получить список пользователей из API. У меня было несколько ошибок, таких как

Невозможно найти другой поддерживающий объект '[object Object]' типа 'object'. NgFor поддерживает только привязку к Iterables, таким как Array

или

Невозможно прочитать свойство 'id' из undefined ”при анализе массива, объявленного на фабрике

Теперь я обошел эти ошибки, но теперь проблема в том, что ошибки исчезли, но я не вижу никаких данных в моем представлении. Страница просто пуста. Я действительно понятия не имею, что я мог бы попробовать дальше. Странно то, что я могу регистрировать свои данные в get (users), а также видеть успех 200 на моей вкладке сети, но я не могу заставить их работать на мой взгляд.

Это мой сервис:

getList(): Observable<any> {
    return this.http.get<{results: any[]}>(`${this.url}/users`)
    .pipe(
      retry(2),
     // catchError(this.handleError)
    );
  }

page.ts

 userList: any[] = [];
...
ngOnInit() {
    this.getAllUsers(); // get the users wenn view intializes
}

getAllUsers() {
  // get saved list of users
  this.userService.getList().subscribe(response => {
    console.log(response);
    this.userList = response.results;
  });
  }

page.html

<ion-list>

          <ion-item lines="none" *ngFor="let user of userList.results">

              <ion-avatar>
                  <ion-img src="assets/friends1.jpeg"> </ion-img>
              </ion-avatar>


                  <h2 class="title">{{user.username}}</h2>

           </ion-item>
</ion-list>

журнал моего ответа:

результаты: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Answer 1

Вы уже присваиваете результаты списку userList, поэтому он уже является массивом и не будет иметь свойства результатов. Измените userList.results на просто userList в ngFor

*ngFor="let user of userList"

Также лучше использовать асинхронный канал, а не подписку, измените свой компонент на

userList$ = this.userService.getList().pipe(map(response => response.results));

и в своем шаблонеиспользуйте асинхронную трубу

*ngFor="let user of (userList$ | async)"