Angular ngFor cannot display data <!--bindings={ "ng-reflect-ng-for-of": "[object Object]" }-->

Issue

I am new to Angular, I have read many discussions about my problem without finding a solution. My front is generating a for my ngFor.

I can see in the console that I obtain the data from my API. Someone can helps me?

Here is my component.ts

import { Component } from '@angular/core';
import { environment } from '../../../environments/environment';
import { BasicRequestsService } from '../services/basic-requests.service';
import { Observable, concat } from 'rxjs';




@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})


export class HomeComponent {
    env = environment;
    usersList;

  constructor(
    private basicRequestsService: BasicRequestsService,

    ) { }
  ngOnInit() {
    const args = new Array();

    concat(
      this.getUsersData(),


      )
    .subscribe();

  }

  getUsersData(): Observable<any>  {
    return Observable.create(observer => {
      this.basicRequestsService.get('/users')
      .subscribe(data => {
        this.usersList = data;
        console.log(this.usersList);
      });
    });
  }
}

Here is my HTML

  <table class="table table-sm table-hover">
      <thead class="thead-dark">
        <th>Client</th>

      </thead>
      <tbody>
        <tr *ngFor="let userList of usersList">
          <td>{{ userList.firstName }}</td>
        </tr>
      </tbody>
    </table>

I am loading the data from my API.

Solution

From console.log it clearly seems that you are getting object with status,message and data and you need to take data from that object So use "data.data" to get usersList

getUsersData(): Observable<any>  {
return Observable.create(observer => {
  this.basicRequestsService.get('/users')
  .subscribe(data => {
    this.usersList = data.data;
    console.log(this.usersList);
  });
});

Answered By - Palak Jadav