My goal is to display a list of users using the ngFor directive. However, when I attempt to do this, the console displays an error message:
Error
ERROR Error: Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
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>
Upon receiving data from the server, the response can be found here: https://i.sstatic.net/hU89W.png
I am puzzled by why the console is showing me this error.