找不到类型 'object' 的不同支持对象“[object Object]”。 angular 8 中 NgFor 仅支持绑定到 Iterables 例如 Arrays

Question

我想使用 ngFor 指令呈现用户列表，但是当我尝试这样做时，控制台显示错误。

错误

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

组-component.ts

groupUsers: any[] = [];

this.groupService.getGroupUsers(this.groupId)
  .subscribe(groupUsers => {
    this.groupUsers = groupUsers;
  });

组-service.ts

getGroupUsers(groupId: number): Observable<any[]> {
      return this.http.get<any[]>(this.baseUrl + 'GroupAttendance/GroupUsers/' + groupId);
}

组-component.html

<div *ngFor="let user of groupUsers" class="modal-body">
  <div class="card">
   <div class="card-body">
    <div class="form-group">
      <p>{{ user.user.knownAs }}</p>
    </div>
  </div>
</div>

这是从服务器获取数据的响应

我不知道为什么控制台显示这个错误

Answer 1

groupUsers 好像不是一个数组。再次检查您的回复类型。

您是否尝试 console.log(groupUsers) 订阅？

Answer 2

试试这个。实际上数组的数据还没有准备好在 html 中提供服务。这就是它抛出此错误的原因。在显示 html 文件中的数据之前，请确保它已准备好呈现。您可以通过以下方式查看。

*ngIf="groupUsers?.length > 0" // Check that groupUsers have data and its contains data

.

<div *ngIf="groupUsers?.length > 0">

    <div *ngFor="let user of groupUsers" class="modal-body">
      <div class="card">
       <div class="card-body">
        <div class="form-group">
          <p>{{ user.user.knownAs }}</p>
        </div>
      </div>
    </div>
</div>

Answer 3

In your group.component.html

   <div *ngIf="groupUsers?.length > 0">
    <div *ngFor="let user of groupUsers" class="modal-body">
      <div class="card">
       <div class="card-body">
        <div class="form-group">
          <p>{{ user.user.knownAs }}</p>
        </div>
      </div>
    </div>
   </div>

找不到类型 'object' 的不同支持对象“[object Object]”。 angular 8 中 NgFor 仅支持绑定到 Iterables 例如 Arrays

Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays in angular 8

angular

typescript

ngfor

错误

组-component.ts

组-service.ts

组-component.html