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

Question

我在从数据库中检索数据时遇到错误。

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

我尝试了所有剩余的响应，但我没有得到确切的解决方案。

我的service.ts:

  users: User[];
  getAllUsers(){
    return this.http.get(environment.apiBaseUrl + '/users');
  }

我的component.ts:

  refreshUserList(){
    this.userService.getAllUsers().subscribe((res) => {
      this.userService.users = res as User[];
    })
  };

我的component.html:

<tr *ngFor="let use of userService.users">
  <td>{{ use.fullName }}</td>
</tr>

Answer 1

因此，使用下面的内容，您可以看到响应不是数组，但其中一个字段是数组。所以，你必须迭代数组字段。

*ngFor="let use of userService.users?.docs"

Answer 2

您应该将您的用户存储在组件中 User 的本地数组中，并在 users.docs

上使用 *ngFor

component.ts:

users: User[];

refreshUserList(){
    this.userService.getAllUsers().subscribe(res => {
      res !== null : this.docs = res.docs;
    })
};

component.html:

<tr *ngFor="let user of users?.docs">
  <td>{{ user.fullName }}</td>
</tr>

Answer 3

在其他方面，您可以通过以下方式检查 html 文件中的数据是否已准备就绪。

<div *ngIf="userService.users?.length > 0">
   <tr *ngFor="let use of userService.users">
       <td>{{ use.fullName }}</td>
    </tr>
</div>

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