为什么在 Angular 中未定义订阅后从服务获取数据？

Question

我定义了一个接口

export interface IEmployee
{
    maNV?:number,
    hoTen?:string,
    gioiTinh?:string,
    ngaySinh?:Date,
    diaChi?:string,
    cmnd?:string,
    sdt?:string,
    luong?:number,
    ngayBatDauLam?:Date,
    maNguoiQuanLy?:number,
    isDelete?:boolean
}

我创建了一个文件 employee.json 包含一些员工的信息：

[
    {"maNV":1,"hoTen":"nguyen quang du","gioiTinh":"nam","ngaySinh":"03/02/1999","diaChi":"Hà Tây","cmnd":"1131131231231232","sdt":3123123141,"luong":300,"ngayBatDauLam":"03/01/2020","maNguoiQuanLy":1,"isDelete":false},
    {"maNV":2,"hoTen":"nguyen thi duyen","gioiTinh":"nu","ngaySinh":"03/02/1999","diaChi":"Hà Tây","cmnd":"1131131231231232","sdt":3123123141,"luong":300,"ngayBatDauLam":"03/01/2020","maNguoiQuanLy":1,"isDelete":false},
    {"maNV":3,"hoTen":"khuat quang chien","gioiTinh":"nam","ngaySinh":"03/02/1999","diaChi":"Hà Tây","cmnd":"1131131231231232","sdt":3123123141,"luong":300,"ngayBatDauLam":"03/01/2020","maNguoiQuanLy":1,"isDelete":false}


]

然后我创建一个服务来从employee.json

获取员工数据

import { Injectable } from '@angular/core';
import {HttpClient} from '@angular/common/http'
import {IEmployee} from './employee/employee'
import {Observable} from 'rxjs'
@Injectable({
  providedIn: 'root'
})
export class EmployeeService {
  private _url:string="../assets/data/employees.json";
  constructor(private http:HttpClient) {}
  getEmployees():Observable<IEmployee[]>
  {
    return this.http.get<IEmployee[]>(this._url);
  }
}

之后我创建了一个组件来从方法getEmployee()中获取员工的数据，主要代码如下：

  public data:Array<IEmployee>;
  constructor(private service:EmployeeService){}
  ngOnInit():void
  {
    this.service.getEmployees().subscribe(data=>this.data=data) ;
    console.log(this.data);
  }

我发现this.data是undefined。我不知道为什么我定义它是Array<IEmployee>。帮我把它转换成类型Array<IEmployee>

Answer 1

那是因为您在数据被 httpClient 获取之前记录数据，请记住 httpClient.get 是一个异步方法，如果您愿意，可以将 console.log 移到里面订阅，它应该可以正常工作：

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

}

为什么在 Angular 中未定义订阅后从服务获取数据？

Why the data is gotten from service after subscribe is undefined in Angular?

web-services

typescript

angular