Reputation: 1972
I'm getting error while retrieving data from the database.
Cannot find a differ supporting object '[object Object]' of type 'object'. NgFor only supports binding to Iterables such as Arrays.
I tried all the remaining responses but I'm not getting the exact solution.
my service.ts:
users: User[];
getAllUsers(){
return this.http.get(environment.apiBaseUrl + '/users');
}
my component.ts:
refreshUserList(){
this.userService.getAllUsers().subscribe((res) => {
this.userService.users = res as User[];
})
};
my component.html:
<tr *ngFor="let use of userService.users">
<td>{{ use.fullName }}</td>
</tr>
Upvotes: 2
Views: 13651
Reputation: 4435
In other way, you can check the data is ready to serve in html file by the following way.
<div *ngIf="userService.users?.length > 0">
<tr *ngFor="let use of userService.users">
<td>{{ use.fullName }}</td>
</tr>
</div>
Upvotes: 0
Reputation: 22372
You should store your users in a local array of User
in the component, and user the *ngFor
on the 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>
Upvotes: 2
Reputation: 2265
So, use the below as you can see that the response is not an array but one of its fields is an array. So, you have to iterate on the array field.
*ngFor="let use of userService.users?.docs"
Upvotes: 4