Отображение объекта в html и получение: «NgFor поддерживает привязку только к Iterables, таким как массивы»

Question

Я получил это json из вызова api rest

{"items":[{"id":"1","name":"Adam","age":20},{"id":"2","name":"Cris","age":32}]}

Из Api я получил объект UserResult, который содержит список определенных c объектов пользователей. Я хотел бы отображать в файле html значения для всех пользовательских объектов - имена для каждого пользователя.

<div>
    <ng-container *ngFor="let name of user">
        <div>
            <span>{{user.name}}</span>
        </div>
    </ng-container>
</div>

Мой data.service выглядит так:

@Injectable({
  providedIn: 'root'
})
export class DataService {

  constructor(private httpClient: HttpClient) { }

  public getUsers(): Observable<UserResult> {
    return this.httpClient.get<UserResult>(baseUrl);
  }
}

, а component.ts выглядит так:

export class SidebarComponent implements OnInit {
  users: UserResults;


  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.getUsers();
  }

  private getUsers() {
    this.dataService.getUsers().subscribe(
      data => {
        this.users = data;
      }
    )
  }
}

Как я понял из этой ошибки я могу не отображать значения для указанного c объекта, как я стараюсь.

 ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.

Должен ли я создать, скажем, массив с типом User, а затем попытаться отобразить в html каждого отдельного пользователя?

Сопоставить мой ответ api из UserResults с users:User[]? Или есть другой способ сделать это?

Answer 1

Итерировать ng-container с использованием user.items.

<div>
    <ng-container *ngFor="let user of user.items">
        <div>
            <span>{{user.name}}</span>
        </div>
    </ng-container>
</div>

Ваш массив находится внутри объекта user, и чтобы использовать {{user.name}}, вам нужно объявить let user of user.items вместо name.

Answer 2

Вы должны изменить свой Компонент, как показано ниже:

export class SidebarComponent implements OnInit {
  users: UserResults;


  constructor(private dataService: DataService) { }

  ngOnInit(): void {
    this.getUsers();
  }

  private getUsers() {
    this.dataService.getUsers().subscribe(
      data => {
        this.users = data.items;
      }
    )
  }
}

, тогда вы можете использовать users в своем шаблоне, как показано ниже:

<div>
    <ng-container *ngFor="let name of users">
        <div>
            <span>{{user.name}}</span>
        </div>
    </ng-container>
</div>

Надеюсь, это поможет !!

Answer 3

Замените выражение на *ngFor="let name of user.items".

Массив находится в свойстве items.

<div>
  <ng-container *ngFor="let name of user?.items">
    <div>
      <span>{{user.name}}</span>
    </div>
  </ng-container>
</div>