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

Question

我正在尝试调用我的 REST API 来获取一些数据并使用 Angular 10 在 html 页面中显示它们。这是我的 http 服务。

public findUsers(page: number, size: number): Observable<User[]> {
  return this.http.get<User[]>(AUTH_API+`users?page=${page}&size=${size}`, httpOptions);
}

这是我的服务电话。

  export class AccountComponent implements OnInit {
  paginator: MatPaginator = {} as MatPaginator;
  loaded: boolean;
  users: User[];
  data:any;

  constructor(private accountSerive: AccountService) { }

  ngOnInit(): void {
    this.paginator.pageIndex = 0;
        this.paginator.pageSize = 20;
    this.getUsers();
  }
  getUsers() {
    this.data = this.accountSerive.findUsers(this.paginator.pageIndex, this.paginator.pageSize)
    .subscribe((data) => {
      this.users = data;
      this.loaded = true; 
    });
  }

}

这是我的 HTML 代码

<tr *ngFor="let user of users" >
  <td>{{user.name}}</td>
  <td>{{user.username}}</td>
  <td>{{user.email}}</td>
  <td>{{user.password}}</td>
  <td>{{user.role}}</td>
</tr>

最后是我的用户模型

    export interface User {
    email: string;
    password: string;
    userName: string;
    roles: [Role]; 

}
export interface Role {
    name: string; 
    
}

这里是数据内容

Answer 1

您从 API 收到的数据显然是以这种格式返回的：

{
  content: User[],
  totalElements: number
}

因此可以在名为 content 的属性下找到实际的结果数组。因此，您需要像这样将调用映射到此属性：

// return type
export interface UsersDto {
  content: User[];
  totalElements: number;
}

public findUsers(page: number, size: number): Observable<User[]> {
    return this.http.get<UsersDto>(AUTH_API+`users?page=${page}&size=${size}`, httpOptions)
             .pipe(map(result => result.content));
}

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

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

angular

angular9

angular10