在 Angular 中访问 Observable object

Question

我目前正在通过一些教程学习 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来完成并访问 object 属性。 这是 IEmployees 接口

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

Answer 1

在声明您的员工数组时，

做这个

public employees: IEmployee = [];

而不是这个

public employees = [] ;

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

Answer 2

this.employees[0]在ngOnInit中undefined ，因为异步请求比ngOnInit完成晚。 所以this.employees的值将在ngOnInit完成后被赋值。 ngFor还能够在异步响应到达后显示属性的值。

Answer 3

您似乎不确定您是要接收单个员工 object 还是一组员工。

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

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

如果您的 API 返回单个员工 object，请将箭头 function 更改为以下内容：data => this.employees = [data]。

要将 output 额外记录到控制台，请将箭头 function 更改为：data => { console.log(data); // 设置 this.employees;}