找不到类型为“对象”的其他支持对象“ [对象对象]”。 NgFor仅支持绑定到Iterables,例如角度8中的数组

时间:2020-02-19 12:36:51

标签: angular typescript ngfor

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

错误

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

Group-component.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);
}

Group-component.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>

这是从服务器获取数据的响应 enter image description here

我不知道为什么控制台会向我显示此错误

2 个答案:

答案 0 :(得分:1)

尝试一下。实际上array的数据尚不能在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>

答案 1 :(得分:0)

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

您是否尝试console.log(groupUsers)进行订阅?