Angular v4 typescript rest api

我是angular v4的新手，在解析de rest api中的嵌套对象时遇到问题，这是一个非常简单的例子，我让代码来说明，这是一个非常基本的代码，但我没有发现错误

错误

错误类型错误：无法读取未定义的属性“email” 在Object.eval[作为更新者]（CarDetailComponent.html:7） 在Object.debugUpdateRenderer[作为updateRenderer]（core.es5.js:12679） 在checkAndUpdateView（core.es5.js:12058） 在callViewAction（core.es5.js:12367） 在execComponentViewsAction（core.es5.js:12313） 在checkAndUpdateView（core.es5.js:12059）中 在callViewAction（core.es5.js:12367） 在execComponentViewsAction（core.es5.js:12313） 在checkAndUpdateView（core.es5.js:12059）中 在callWithDebugContext（core.es5.js:13041）

班级

import { JsonObject, JsonProperty } from "json2typescript";

@JsonObject
export class User {
  @JsonProperty("id", Number)
  public id: number = undefined;
  @JsonProperty("email", String)
  public email: string = undefined;
  constructor(
  ) { }
}

@JsonObject
export class Car {
  @JsonProperty("id", Number)
  public id: number = undefined;
  @JsonProperty("brand", String)
  public brand: string = undefined;
  @JsonProperty("createdby", User)
  public createdBy: User = undefined

  constructor(
  ) { }
}

（服务：car.Service.ts）

（组件：汽车详图.Component.ts）

（cardetail.html）

汽车细节工程！


{{car.brand}}印刷品：福特


{{car.createdBy.email}}打印：email@email.com//没关系，但这条线就是问题所在


{{createdBy.email}}打印：email@email.com

该组件创建一个新的

汽车

，并将其分配给其

汽车

字段。此汽车对象的

createdBy

字段设置为未定义。模板试图显示汽车的

createdBy

的属性

email

，该属性未定义。因此出现了错误

使用

或

{{car.createdBy.email}

以避免错误

import { Injectable } from '@angular/core';
import { Car } from "app/car/car";
import { Observable } from "rxjs";
import 'rxjs/Rx';
import { Http } from "@angular/http";

@Injectable()
export class CarService {
  private baseHost: string = "url/to/api";

  constructor(private _http: Http) { }
  get(id: number) {
    return this._http.get(this.baseHost + id + '/show.json')
      .map(data => data.json()).toPromise();
  }
}

import { Component, OnInit } from '@angular/core';
import { CarService } from "app/car/car.service";
import { Car, User } from "app/car/car";


import { JsonConvert } from "json2typescript"

@Component({
  selector: 'app-car-detail',
  templateUrl: './car-detail.component.html',
  styleUrls: ['./car-detail.component.css'] 
})
export class CarDetailComponent implements OnInit {
  public car:Car = new Car();
  public createdBy:User = new User();
  constructor(private _carService: CarService) { }

  getCar(){
    return this._carService
               .get(1) 
               .then(
                  data =>
                   {this.car = JsonConvert.deserializeString(JSON.stringify(data), Car);
                    this.createdBy = JsonConvert.deserializeString(JSON.stringify(data.createdby), User); 
                    console.log(data,JSON.stringify(data))
                  });
  }

  ngOnInit() {
    this.getCar();
  }

}

<p>
  car-detail works!
</p>
<p>
  {{car.brand}} print: FORD 
</p>
<p>
  {{car.createdBy.email}} print: email@email.com //It's ok but this line is the problem  
</p>
<p>
  {{createdBy.email}} print: email@email.com
</p>

{{car.createdBy?.email}}

<p *ngIf="car.createdBy">
  {{ car.createdBy.email }}
</p>