问题 api--找不到类型为“object”的不同支持对象“[object Object]”。 NgFor 仅支持绑定到 Iterables，例如 Arrays

Question

我得到这个 api “http://dummy.restapiexample.com/api/v1/employees” 然后我尝试将它与 *ngFor 一起使用，但发生了这个问题 “ERROR 错误：找不到类型为‘object’的不同支持对象‘[object Object]’。NgFor 仅支持绑定到 Iterables，例如数组。”

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>

Answer 1

您的回复如下所示：

{ 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);
 }
}