Angular нгДля отображения данных не может

Question

Я новичок в Angular, я прочитал много дискуссий о моей проблеме, не найдя решения. Мой фронт генерирует для моего ngFor.

Я вижу в консоли, что я получаю данные из моего API. Может кто-то мне поможет?

Вот мой компонент.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);
      });
    });
  }
}

Вот мой 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>

Я загружаю данные из моего API.

Answer 1

Спасибо @sajeethan!

Он только что изменил мою привязку на

Answer 2

Из console.log ясно, что вы получаете объект со статусом, сообщением и данными, и вам нужно извлечь данные из этого объекта. Поэтому используйте data.data, чтобы получить usersList

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

Answer 3

Попробуйте следующее,

<table class="table table-sm table-hover">
      <thead class="thead-dark">
      <tr>
        <th>Client</th>       
      </tr>
      </thead>
      <tbody>
      <tr *ngFor="let userList of usersList">
       <td>{{ userList?.firstName }}</td>
      </tr>
      </tbody>
 </table>