angular - Varför returneras undefined när man försöker komma åt egenskaper på ett TypeScript-objekt i ett Angular2-projekt?

Jag har ett Angular2-projekt där jag använder http-modulen för att göra en get-förfrågan. Objektet hämtas från servern och verkar deserialiseras korrekt till dess motsvarande TypeScript-objekt, men när jag försöker komma åt en egenskap returneras undefined, även om när jag skriver ut objektet till konsolen precis innan jag försöker komma åt dessa egenskaper verkar datan finnas.

Så här ser min get-requestmetod ut.

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

  }

Så här ser metoden ut som hanterar svaret.

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

Employee-klassen ser ut så här:

 export class Employee {

    ...
      private _firstName:string;
    ...

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

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

    ...
    }

Bilden visar konsolutdata när denna begäran görs.

Jag förstår inte varför när jag försöker hämta firstName så returneras undefined även om det finns i objektet precis innan.

Alla idéer om varför detta händer skulle vara mycket hjälpsamma för mig.

Svar #1

Det du förväntar dig kan endast uppnås genom arv. Men att deklarera en typ av ett objekt som en klass gör inte att objektet ärver klassen, dvs employee är inte ett barn till Employee i din kod.

För att kalla på gettern måste du först ärva den, t.ex:

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

Då kommer du att kunna komma åt emp.firstName och det kommer att returnera Dan. Du kommer också att behöva acceptera argument i din Employee-klass.

Jag har gjort en plnkr-demo där Employee-klassen accepterar ett argument för firstName. Håll dina utvecklarverktyg öppna så att det stoppar både i getter och setter.

Eftersom TypeScript endast kontrollerar koden vid kompileringstid har du inget sätt att kontrollera om API:et returnerade något annat, t.ex. _name istället för _firstName vid körning. Så jag rekommenderar att använda ett interface istället för en class i ditt fall.