在 Angular 中访问 Observable 对象答案

【问题标题】：Accessing Observable object in Angular在 Angular 中访问 Observable 对象
【发布时间】：2021-03-25 08:20:32
【问题描述】：

我目前正在通过一些教程学习 Angular，但遇到了一个问题。我不太明白为什么我的控制台给我错误 ERROR in src/app/employee/employee.component.ts:17:24 - error TS2322: Type 'IEmployee' is not assignable to type 'any[]'.17 .subscribe(data => this.employees = data); 这是我从教程中遵循的代码：

export class EmployeeDetailComponent implements OnInit {

  public employees = [];

  constructor(private _employeeService : EmployeeService) { }

  ngOnInit(): void {
    this._employeeService.getEmployees()
    .subscribe(data => this.employees = data);
    console.log(this.employees);
  }

}

Http 请求应该返回我创建的 IEmployees 接口类型的 observable，但除非我这样做public employees:any = []，否则它不起作用。这确实解决了我的问题，但我不明白为什么，因为在教程中它有效没有它。我的第二个问题是，当我通过 http 请求获取数据后尝试控制台记录员工数组，以查看它是什么类型的数据，但它似乎是空的（我也尝试过 this.employees[0].name）。为什么我不能在ngOnInit() 中访问该数组，但在我的html 文件中我可以使用ngFor 来访问并访问对象属性。这是 IEmployees 接口

export interface IEmployee {
    id: number,
    name: string,
    age : number
}

【问题讨论】：

标签： javascript angular typescript

【解决方案1】：

this.employees[0] 在ngOnInit 中是undefined，因为异步请求完成的时间比ngOnInit 的完成时间要晚。所以this.employees 的值将在ngOnInit 完成后赋值。 ngFor 也可以在异步响应到达后显示属性的值。

【讨论】：

啊，有道理，所以如果我想操作该数据，我只能在 subscribe 方法中进行操作？
是的，收到响应时调用subscribe的内容。您可以在那里操作接收到的数据。

【解决方案2】：

您似乎不确定要接收单个 Employee 对象还是一组Employees。

您已在 Employee 服务中声明 getEmployees 方法以返回 Observable。

如果您的 API 返回一个员工数组，请更改 getEmployees 方法，使其返回一个 Observable。

如果您的 API 返回单个 Employee 对象，请将箭头函数更改为以下内容：数据 => this.employees = [数据]。

要将输出另外记录到控制台，请将箭头函数更改为：数据 => { console.log(data); // 设置 this.employees;}

【讨论】：

【解决方案3】：

在声明员工数组时，

这样做

public employees: IEmployee = [] ;

而不是这个

public employees = [];

这是因为您的服务正在重新调整 IEmployee 类型的数据，而您正在使用的变量不是该类型

【讨论】：

我忘了提，但我已经尝试过了，我在 src/app/employee/employee.component.ts:12:10 中得到了这个错误：错误 TS2739: 类型 'undefined[ ]' 缺少类型“IEmployee”的以下属性：id、姓名、年龄 12 岁的公共雇员：IEmployee = []； `
然后检查，你的服务返回的数据的属性和你声明的接口一定有一些差异