AngularJS 2 - 内部属性数据绑定 - 异常:类型错误:无法读取未定义的属性

我正在使用Typescript开发AngularJS 2应用程序。我遇到了一个问题，即我无法使用数据绑定访问 HTML 页面中 Typescript 类中定义的属性。我在下面包含了相关文件。如果我错过了什么，请告诉我。我正在研究这个问题超过两天，目前我还没有想法。

打字稿类。

export class ApproveBooking {
constructor(
    public name: string,
    public form: DynamoForm,
    public cabBooking: CabBooking) {}
 }
export class DynamoForm {
constructor(
    public formFields: DynamoFormField[]) { }
 }
export class DynamoFormField {
constructor(
    public fieldName: string,
    public fieldId: string,
    public fieldLabel: string,
    public fieldType: string,
    public fieldValue: string,
    public required: boolean) { }
}
export class CabBooking {
constructor(
    public id: number,
    public bookingId: string,
    public status: string,
    public notes: string,
    public user: boolean,
    public travelDateString: string,
    public travelTimeString: string,
    public pickupLocation: string,
    public dropLocation: string,
    public approver: string,
    public approverAction: string,
    public approverComments: string,
    public approvedDate: string,
    public cabDriver: string,
    public cabDriverAssignedDate: string,
    public createdDate: string,
    public modifiedDate: string) { }
}

从服务器获取 JSON 数据并将其分配给"批准预订"类的服务。

getSingleCabBookingForApproval(bookingId: string) {
    var accessToken = localStorage.getItem('cabservice_access_token');
    var approveUrl = this._appService.getAppUrl() + "/dynamo/api/cabservice/bookings/approve/" + bookingId + "?access_token=" + accessToken;
    return this._http.get(approveUrl)
        .map(res => {
            return <ApproveBooking> res.json();
        })
        .catch(this.handleError);
}

从服务器接收的 JSON 值如下：

{
"name": "Name set in backend...",
"form": {
"formFields": [
  {
    "fieldName": "approverComments",
    "fieldId": "approverComments",
    "fieldLabel": "Approver Comments",
    "fieldType": "textarea",
    "fieldValue": "",
    "required": false
  },
  {
    "fieldName": "approverAction",
    "fieldId": "approverAction",
    "fieldLabel": "Approve Cab Request ",
    "fieldType": "radio",
    "fieldValue": [
      {
        "label": "Approve",
        "name": "approve",
        "selected": false
      },
      {
        "label": "Reject",
        "name": "reject",
        "selected": false
      }
    ],
    "required": false
  },
  {
    "fieldName": "approvedDate",
    "fieldId": "approvedDate",
    "fieldLabel": "Approved Date",
    "fieldType": "datetime-local",
    "fieldValue": "",
    "required": true
  }
]
},
"cabBooking": {
"id": 19,
"bookingId": "BId_1453269360424",
"status": "New",
"notes": null,
"user": "karthik",
"travelDate": 1453228200000,
"travelDateString": null,
"travelTimeString": null,
"pickupLocation": "velachery",
"dropLocation": "chennai one",
"approver": "sivaram",
"approverAction": null,
"approverComments": null,
"approvedDate": null,
"cabDriver": null,
"cabDriverAssignedDate": null,
"createdDate": 1453269360000,
"modifiedDate": 1453269360000
}
}

AngularJS 组件使用服务方法来填充其属性之一。

@Component({
templateUrl: 'app/approver/approver_approvebooking.html'
})
export class ApproveCabBookingComponent implements OnInit {
private errorMessage: string;
private approveBooking: ApproveBooking;
constructor(
    private _logger: Logger,
    private _router: Router,
    private _routeParams: RouteParams,
    private _cabBookingService: CabBookingService) { }
ngOnInit() {
    let bookingId = this._routeParams.get('bookingId');
    this._logger.log("bookingId = " + bookingId);
    this.approveBooking = this._cabBookingService.getSingleCabBookingForApproval(bookingId)
        .subscribe(
            approveBooking => {
                this.approveBooking = approveBooking;
                this._logger.log("this.approveBooking => " + JSON.stringify(this.approveBooking));
            },
            err => {
                this._logger.log("Error =>" + err.status + "," + JSON.stringify(err));
            },
            () => console.log('Approve Cab Booking Entity Fetched!');
            );
}

}

组件的 HTML 模板：

<div class="col-md-12 title-panel">
<h3>Booking Status</h3>
</div>
<div class="col-md-12 content-panel">
<div class="row">
    <div class="col-md-12">
        <h4 class="label-heads">Booking ID</h4>
        <div class="form-value">
            <span>{{approveBooking.cabBooking.bookingId}}</span>
        </div>
    </div>
</div>
</div>

我面临的问题是，当我尝试在 HTML 视图中使用 approveBooking 的内部属性时，它会在下面抛出一个错误。

TypeError: Cannot read property 'bookingId' of undefined in [{{approveBooking.cabBooking.bookingId}} in ApproveCabBookingComponent@8:10]

仅供参考，当我使用平面 JSON 数据和平面 Typescript 类时，事情按预期工作。