找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Angular 8 中的数组答案

【问题标题】：Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays in angular 8找不到“object”类型的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Angular 8 中的数组
【发布时间】：2020-06-03 15:13:43
【问题描述】：

我想使用ngFor 指令呈现用户列表，但是当我尝试执行此操作时，控制台显示错误。

错误

错误错误：找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 只支持绑定到 Arrays 等 Iterables。

组组件.ts

groupUsers: any[] = [];

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

Group-service.ts

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

组组件.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>

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

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

【问题讨论】：

您是否检查过是否从请求中获取了任何数据？
是的，数据是数组格式

标签： angular typescript ngfor

【解决方案1】：

在您的 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>

【讨论】：

【解决方案2】：

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

*ngIf="groupUsers?.length > 0" // 检查 groupUsers 有数据并且它包含数据

<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>

【讨论】：

【解决方案3】：

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

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

【讨论】：

我在控制台中检查了这个，它是一个数组
您是否尝试在循环前添加*ngIf="groupUsers"？
是的，亲爱的，我试过了，但同样的问题仍然存在