Javascript AngularJS 2-内部属性数据绑定-异常：TypeError:无法读取中未定义的属性

我正在使用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数据并将其分配给“ApproveBooking”类的服务

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

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>

---

仅供参考，当我使用平面JSON数据和平面Typescript类时，一切正常。

经过一些研究，我发现问题是由于组件模板（HTML）甚至在JSON数据可用于相应组件之前就已呈现

<div *ngIf="isDataAvailable">
    <div class="col-md-12 title-panel">
        <h3>Manage Booking </h3>
    </div>
    <div class="col-md-12 content-panel">
        <form (ngSubmit)="onSubmit()">
            <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>
        </form>
    </div>
</div>

下面的帖子有助于确定原因。

通过遵循那里提供的解决方案，我更新了AngularJS组件。下文提供了这一信息

@Component({
templateUrl: 'app/approver/approver_approvebooking.html'
})

export class ApproveCabBookingComponent implements OnInit {
private errorMessage: string;
private approveBooking: ApproveBooking;
private isDataAvailable: boolean;

constructor(
    private _logger: Logger,
    private _router: Router,
    private _routeParams: RouteParams,
    private _cabBookingService: CabBookingService) { 

    this.isDataAvailable = false;
}

ngOnInit() {
    let bookingId = this._routeParams.get('bookingId');
    this._logger.log("bookingId inside ngInit = " + bookingId);

    this.approveBooking = this._cabBookingService.getSingleCabBookingForApproval(bookingId)
        .subscribe(
            approveBooking => {
                this.approveBooking = approveBooking;
                this.isDataAvailable = true;
                this._logger.log("this.approveBooking => " + JSON.stringify(this.approveBooking));
            },
            err => {
                this._logger.log("Error while accessing approveBooking...error, JSONed = " + err.status + "," + JSON.stringify(err));
            },
            () => console.log('Approve Cab Booking Entity Fetched!');
            );
}
}

相应的视图已更新为使用组件中的“isDataAvailable”属性集

<div *ngIf="isDataAvailable">
    <div class="col-md-12 title-panel">
        <h3>Manage Booking </h3>
    </div>
    <div class="col-md-12 content-panel">
        <form (ngSubmit)="onSubmit()">
            <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>
        </form>
    </div>
</div>

管理预订
预订ID
{{approveBooking.cabBooking.bookingId}

经过一些研究，我发现问题是由于组件模板（HTML）甚至在JSON数据可用于相应组件之前就已呈现

<div *ngIf="isDataAvailable">
    <div class="col-md-12 title-panel">
        <h3>Manage Booking </h3>
    </div>
    <div class="col-md-12 content-panel">
        <form (ngSubmit)="onSubmit()">
            <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>
        </form>
    </div>
</div>

下面的帖子有助于确定原因。

通过遵循那里提供的解决方案，我更新了AngularJS组件。下文提供了这一信息

@Component({
templateUrl: 'app/approver/approver_approvebooking.html'
})

export class ApproveCabBookingComponent implements OnInit {
private errorMessage: string;
private approveBooking: ApproveBooking;
private isDataAvailable: boolean;

constructor(
    private _logger: Logger,
    private _router: Router,
    private _routeParams: RouteParams,
    private _cabBookingService: CabBookingService) { 

    this.isDataAvailable = false;
}

ngOnInit() {
    let bookingId = this._routeParams.get('bookingId');
    this._logger.log("bookingId inside ngInit = " + bookingId);

    this.approveBooking = this._cabBookingService.getSingleCabBookingForApproval(bookingId)
        .subscribe(
            approveBooking => {
                this.approveBooking = approveBooking;
                this.isDataAvailable = true;
                this._logger.log("this.approveBooking => " + JSON.stringify(this.approveBooking));
            },
            err => {
                this._logger.log("Error while accessing approveBooking...error, JSONed = " + err.status + "," + JSON.stringify(err));
            },
            () => console.log('Approve Cab Booking Entity Fetched!');
            );
}
}

相应的视图已更新为使用组件中的“isDataAvailable”属性集

<div *ngIf="isDataAvailable">
    <div class="col-md-12 title-panel">
        <h3>Manage Booking </h3>
    </div>
    <div class="col-md-12 content-panel">
        <form (ngSubmit)="onSubmit()">
            <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>
        </form>
    </div>
</div>

管理预订
预订ID
{{approveBooking.cabBooking.bookingId}