Блог

я получаю этот api «http://dummy.restapiexample.com/api/v1/employees » затем я попытался использовать его с *ngFor, но возникла эта проблема «ОШИБКА Ошибка: не удается найти другой поддерживающий объект «[object Object]» типа «object». ngFor поддерживает привязку только к итерациям, таким как массивы «.

app.component.ts

 import { Component } from '@angular/core';
import { HttpClient } from "@angular/common/http";
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  employes;
  constructor(private http : HttpClient) { 
    this.http.get('http://dummy.restapiexample.com/api/v1/employees').subscribe(employ =>
{this.employes = employ})
  }
}
  

app.component.html

 <table class="table">
    <thead class="thead-dark">
      <tr>
        <th scope="col">#</th>
        <th scope="col">Name</th>
        <th scope="col">Salary</th>
        <th scope="col">Age</th>
      </tr>
    </thead>
    <tbody>
      <tr *ngFor='let empo of employes ; let i = index '>
        <th scope="row">{{i   1}}</th>
        <td>{{empo.employee_name}}</td>
        <td>{{empo.employee_salary}}</td>
        <td>{{empo.employee_age}}</td>
      </tr>
    </tbody>
  </table>
  

Ваш ответ выглядит так:

{ status: string, data: [], message: string }

итак, у вас есть два варианта:

в конструкторе {this.employes = employ.data}

или

в представлении шаблона <tr *ngFor='let empo of employes.data ; let i = index '>

один из них должен работать, если ответ API успешен

И вам лучше переместить свой http-запрос в метод OnInit, чтобы ваш компонент выглядел так:

 export class AppComponent implements OnInit {

 employes;

 constructor(private http: HttpClient) {}

 ngOnInit(): void {
  this.http.get('http://dummy.restapiexample.com/api/v1/employees')
   .subscribe(res => this.employes = res.data);
 }
}