Without reading all your code but seeing
`approveBooking.cabBooking.bookingId` and `JSON` which is probably fetched
from the server I guess you need
approveBooking?.cabBooking.bookingId
or
approveBooking?.cabBooking?.bookingId
This way `cabBooking` is only evaluated if `approveBooking` is != null.
The error happens when Angular tries to evaluate
`approveBooking.cabBooking.bookingId` while `approveBooking` isn't yet set
because the respone from the server han't yet arrived.
On Monday, February 29, 2016 at 6:09:17 AM UTC+1, karthik chinnayan wrote:
>
> I am working on a AngularJS 2 app using Typescript. I am facing a problem
> where I cannot access a property defined in the Typescript class in the
> HTML page using data binding. I have included the relevant files below.
> Please let me know if I am missing something. I am looking at this one
> issue for more than 2 days now and I am out of ideas at present.
>
> 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) { }
> }
>
> Service that fetches JSON data from server and assigns it to the
> 'ApproveBooking' class.
>
> 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 value received from the server is below:
>
> {
> "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 using the service method to populate one of its
> properties.
>
> @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 template for the component:
>
> <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>
>
> The problem I face is when I try to use the approveBooking's inner
> property in an HTML view, it throws up an error below.
>
> TypeError: Cannot read property 'bookingId' of undefined in
> [{{approveBooking.cabBooking.bookingId}} in ApproveCabBookingComponent@8:10]
>
> FYI, when I use a flat JSON data and a flat Typescript class, things are
> working as expected.
>
>
--
You received this message because you are subscribed to the Google Groups
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
