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

敦古延

我定义了一个接口

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

之后,我创建了一个组件来从method中获取员工数据getEmployee(),主要代码如下:

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

我发现this.dataundefined。我不知道为什么在定义它的时候为什么Array<IEmployee>。并帮助我将其转换为typeArray<IEmployee>

尼古拉

那是因为您在记录数据之前被httpClient捕获,因此请记住,httpClient.get是一个异步方法,如果您希望将console.log移到订阅中,它应该可以正常工作:

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

}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

为什么仅在刷新React中的页面后才能从localStorage获取正确的数据

服务数据获取器在 Angular 中返回未定义

为什么我需要重新加载页面才能从Angular中的subjectSubscription获取数据?

RxJS:为什么订阅中未定义“this”

为什么订阅后我的对象的变量未定义

为什么订阅服务主题比从功能中获取数据更好?

为什么在方法中未定义对象数据?

为什么Cookie中的数据返回未定义状态?

为什么从json中未定义数据?

为什么JSON数据在JavaScript中显示“未定义”?

订阅中未定义“ this”

为什么在JavaScript中未定义“ [] [[]]”

从firebase中未定义的获取数据

无法在 Angular 中读取未定义的属性(读取“订阅”)

从组件服务之间的共享数据中获取数据时未定义数据

使用 React 钩子,为什么获取的数据未定义?

为什么在角度2中从Observable中打印未定义的数据

AngularJS:为什么我的控制器从服务调用中得到“未定义”?

为什么Angular中ngOnInit方法中的未定义元素

为什么使用requirejs在模块中定义未定义

为什么简写定义的变量在React中未定义

为什么filter()中的`this`在VueJS中变得未定义?

尝试在Discord.js中获取公会时,为什么会得到未定义的信息?

在 NodeJS 中从 JSON 中获取数据导致未定义

从角度 12 的服务中获取未定义的值

为什么尝试读取数据属性在我的网站中返回未定义?

为什么我从包含数据的字符串中得到未定义?

为什么在原始查询更新中未定义续集元数据?

为什么我在尝试访问通过 ajax 返回的 json 数据中的值时未定义