Angular 7找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到可迭代对象，例如数组

Question

从数据库检索数据时出现错误。

  

找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到数组等Iterable。

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

我的 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的本地数组中，并将用户*ngFor存储在users.docs

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>