Angular 7 找不到類型為“object”的不同支持對象“[object Object]”。 NgFor 只支持綁定到 Iterables，比如 Arrays

Question

從數據庫中檢索數據時出錯。

找不到類型為“object”的不同支持對象“[object Object]”。 NgFor 僅支持綁定到可迭代對象，例如數組。

我嘗試了所有剩余的響應，但沒有得到確切的解決方案。

我的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上使用*ngFor users.docs

組件.ts ：

users: User[];

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

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