在Angular中从API获取数据时出现问题

我创建了一个从API“”获取数据的示例。 在我的示例中，我使用了服务和可观察性。 我收到一个错误“错误：尝试区分“[object]”时出错。只允许使用数组和iterables”

这是我的密码

雇员培训

export interface IEmployee{
id : number,
email : string,
first_name : string
}

雇员服务

import { IEmployee } from './employee';
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class EmployeesService {

private _url : string = "https://reqres.in/api/users";

constructor( private http : HttpClient ) { }

getEmployees(): Observable<IEmployee[]>{
 return this.http.get<IEmployee[]>(this._url); 
}  
}

employee-list.component.ts

import { EmployeesService } from './../employees.service';
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'employee-list',
templateUrl: './employee-list.component.html',
styleUrls: ['./employee-list.component.css']
})
export class EmployeeListComponent implements OnInit {

public employees = [];

constructor(private employeesService : EmployeesService) { }

ngOnInit() {
this.employeesService.getEmployees()
  .subscribe(data => this.employees = data);  
}
}

<h2>Employee List</h2>
<ul *ngFor = "let employee of employees">
 <li>{{employee.email}}</li>
</ul>

员工名单

{{employee.email}

在尝试使用

强制转换数据之前，应首先获取数据列表：

在employees.service.ts中更改函数

getEmployees（）

：

因为这就是响应的外观：

const response={“page”：1，“per_page”：6，“total”：12，“total_page”：2，“data”：[{“id”：1，“email”：“george”。bluth@reqres.in，“名字”：“乔治”，“姓氏”：“布鲁斯”，“阿凡达”：https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg}，{“id”：2，“电子邮件”：“珍妮特。weaver@reqres.in，“名字”：“珍妮特”，“姓氏”：“韦弗”，“阿凡达”："https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg}，{“id”：3，“email”：“emma。wong@reqres.in“，”姓“：”爱玛“，”姓“：”王“，”阿凡达“：”https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg}，{“id”：4，“email”：“eve。holt@reqres.in，“名字”：“夏娃”，“姓氏”：“霍尔特”，“阿凡达”：https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg}，{“id”：5，“电子邮件”：“查尔斯。morris@reqres.in“，”姓“：”查尔斯“，”姓“：”莫里斯“，”阿凡达“：”https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg}，{“id”：6，“电子邮件”：“特雷西。ramos@reqres.in，“名字”：“特雷西”，“姓氏”：“拉莫斯”，“阿凡达”：https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg"}]};
console.log（response.data）；

你能分享API的响应吗？我正在使用这个开放API“”，它包含{“page”：1，“per_page”：6，“total”：12，“total_page”：2，“data”：[{“id”：1，“email”：“george”。bluth@reqres.in“，”姓“：”乔治“，”姓“：”布鲁斯“}，{”id“：2，”电子邮件“：”珍妮特。weaver@reqres.in“，”first_name“：”Janet“，”last_name“：”Weaver“}]}下面的答案是正确的。我是在一个代理后面，无法访问API。响应中的无关属性给您带来了麻烦。好的，谢谢@tuckert07感谢@Oussail的响应。我得到了结果，但有一个错误。在编写时”.subscribe（response=>this.employees=response.data）”。它给出了一个错误“类型“IEEmployee[]”上不存在属性“data”。“很抱歉迟到了，我已经更新了我的答案。我忘了将Observable更改为ObservateThaks很多@Oussail，现在我的项目正以我想要的方式工作。干得好，别忘了点击复选标记，将此问题标记为正确的答案。”。

getEmployees(): Observable<any>{
 return this.http.get<any>(this._url); 
}

ngOnInit() {
this.employeesService.getEmployees()
  .subscribe(response=> this.employees = response.data);  
}