在angular2项目中访问打字稿对象的属性时，为什么返回undefined? [英] Why is undefined returned when accessing properties of a typescript object in an angular2 project?

问题描述

我有一个angular2项目，其中正在使用http模块发出get请求.该对象是从服务器中检索到的，显然已经正确地反序列化为其相应的Typescript对象，但是当我尝试访问属性时，它返回的是undefined，即使当我尝试访问这些属性之前将对象打印到控制台时，数据似乎存在.

I have an angular2 project in which I am using the http module to make a get request. The object is retrieved from the server and apparently is deserialized properly into its corresponding typescript object, but when I try to access a property it returns undefined, even though when I print the object to the console right before trying to access these properties, the data appears to exist.

这就是我的get请求方法的样子.

This is what my get request method looks like.

  getDataForEmployee(data){
    var url = this.active+"/guest/"+data;

    var headers = new Headers();

    headers.append("Content-Type", "application/json");

    return this.http
      .get(url, {headers:headers})
      .toPromise()
      .then((res:Response)=> res.json() as Employee);

  }

这是处理响应的方法的外观.

This is how the method looks which is handling the response.

this.employeeHttp.getDataForEmployee(userid)
  .then((employee:Employee)=>{
    console.log(employee);
    console.log("firstname: "+employee.firstName);
    ...

Employee类如下:

The Employee class looks like this:

 export class Employee {

    ...
      private _firstName:string;
    ...

      get firstName(): string {
        return this._firstName;
      }

      set firstName(value: string) {
        this._firstName = value;
      }

    ...
    }

该图像显示了发出此请求时的控制台输出.

The image shows the console output when making this request.

我不明白为什么当我尝试检索firstName时，即使之前存在于对象中，它也返回未定义.

I don't understand why when I try to retrieve firstName it returned undefined even though it exists in the object right before.

关于为什么会发生这种情况的任何想法都对我很有帮助.

Any ideas as to why this is happening would be very helpful to me.

推荐答案

您期望的只有通过继承才能实现.但是将对象的类型声明为类并不能使该对象继承该类，即 employee 不是代码中 Employee 的子代.

What you are expecting can be achieved only by inheritance. But declaring a type of an object as a class doesn't make the object inherit the class i.e employee is not a child of Employee in your code.

要调用getter，您必须先继承它，例如:

To call the getter you will have to inherit it first eg:

let emp = new Employee("Dan"); // passing only firstName for demo

然后，您将可以访问 emp.firstName ，它将返回 Dan .您还需要在 Employee 类中接受参数.

Then you will be able to access emp.firstName and it will return Dan. You will also need to accept arguments in your Employee class.

我制作了一个 plnkr 演示，其中 Employee 类为firstName接受一个参数.保持您的开发人员工具处于打开状态，以便它将同时在getter和setter中停止.

I have made a plnkr demo where the Employee class accepts one argument for firstName. Keep your developer tools open so that it will stop in both getter and setter.

由于打字稿仅检查编译类型的代码，因此您无法检查API是否在运行时返回了其他内容，例如: _name 而不是 _firstName .因此，在您的情况下，我建议使用 interface 而不是 class .

As typescript only checks code at compile type you have no way of checking if the API returned something else eg: _name instead of _firstName at runtime. So I recommend using an interface instead of a class in your case.

这篇关于在angular2项目中访问打字稿对象的属性时，为什么返回undefined?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！