javascript - Angular 7 Cannot find a differ supporting object '[object Object]' of type 'object'

admin管理员组

文章数量:1352819

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 ponent.ts:

  refreshUserList(){
    this.userService.getAllUsers().subscribe((res) => {
      this.userService.users = res as User[];
    })
  };

my ponent.html:

<tr *ngFor="let use of userService.users">
  <td>{{ use.fullName }}</td>
</tr>

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 ponent.ts:

  refreshUserList(){
    this.userService.getAllUsers().subscribe((res) => {
      this.userService.users = res as User[];
    })
  };

my ponent.html:

<tr *ngFor="let use of userService.users">
  <td>{{ use.fullName }}</td>
</tr>

• javascript
• angular
• typescript
• angular7
• angular-template

Share Improve this question Follow edited Feb 20, 2019 at 7:44 veben 22.4k1515 gold badges6969 silver badges8383 bronze badges asked Feb 19, 2019 at 13:12 sunsun 1,97244 gold badges2020 silver badges3434 bronze badges 6

• Can you please console.log the response? – dileepkumar jami Commented Feb 19, 2019 at 13:18
• so you've done something weird. your response isn't typeof User[]. Try add response type in getAllUsers() method (User[]). and in http.get add this.http.get<User[]>(environment.apiBaseUrl + '/users'); – Vinko Vorih Commented Feb 19, 2019 at 13:20
• {status: true, docs: Array(5)} this is my console.log of response @dileepkumarjami – sun Commented Feb 19, 2019 at 13:22
• 2 try *ngFor="let use of userService.users?.docs" as you reference the wrong object in the template according to the console.log. – ForestG Commented Feb 19, 2019 at 13:25
• Thanks @ForestG it's working.. – sun Commented Feb 19, 2019 at 13:27

 |  Show 1 more ment

3 Answers 3

Sorted by: Reset to default 4

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"

You should store your users in a local array of User in the ponent, and user the *ngFor on the users.docs

ponent.ts:

users: User[];

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

ponent.html:

<tr *ngFor="let user of users?.docs">
  <td>{{ user.fullName }}</td>
</tr>

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>

本文标签：