I have been troubleshooting a problem with my AngularJS 2 app using Typescript. The issue arises when I attempt to access a property from the Typescript class in the HTML page using data binding. I have provided the relevant files below for reference. If there is something I am overlooking, please do let me know. I have been stuck on this particular issue for over two days now and feel like I have exhausted all possible solutions.
Below are the Typescript classes:
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) { }
}
Here is the service that retrieves JSON data from the server and assigns it to the 'ApproveBooking' class:
... [service content here] ...JSON data received from the server looks like this:
... [JSON data sample here] ...Utilizing the AngularJS component which utilizes the service method to populate one of its properties:
... [component content here] ...The template for the component's HTML view:
... [HTML template content here] ...The issue occurs when trying to access the inner property of approveBooking in the HTML view, resulting in an error. Here is the specific error message:
TypeError: Cannot read property 'bookingId' of undefined in [{{approveBooking.cabBooking.bookingId}} in ApproveCabBookingComponent@8:10]
For your information, everything works as expected when using flat JSON data and a flat Typescript class.