CODEWITHSUNDEEP
angularjsangularangular2-template
Daryl Smith
Daryl Smith

Reputation: 45

Angular2 Object Instantiation for Asynchronous Data

I was working on an angular2 project that gets an object asynchronously from the api using the new Observable framework. 

  this._accountsService.getAccountDetails(this.id)
    .subscribe(
        AccountDetails => this.accountDetails = AccountDetails,
        err => this.errorMessage = <any>err,
        () => console.log(this.accountDetails)
  );

When we tried to access the property of that object using interpolation {{AccountDetails.UserName}} ,we got a property undefined error, because the object had not yet been received from the api. We fixed this by instantiating the object in the class

 accountDetails: AccountDetails = new AccountDetails();

This works, however I noticed in Angular 1, a fake object would be created, if the object was undefined, so that there would be never be an an undefined error -- it would just show an empty value in the interpolated code. Is this a change in Angular2? Also, I noticed that when we used *ngFor in our code to iterate through the properties of an object, it would display an empty value (rather than trigger an object undefined error) if the object had not yet been received from the api. Is this something that occurs internally in the *ngFor directive?

Upvotes: 1

Views: 62

Answers (2)

mrinalmech
mrinalmech

Reputation: 2175

Angular 2 is based off Typescript so there is stricter type checking hence the undefined error.

One thing you can do to avoid any errors is use an

*ngIf="AccountDetails.UserName"

condition on the parent tag (parent of the *ngFor loop). This way it only gets rendered once the information has been loaded from the API. You can have some loading screen with the opposite condition 

*ngIf = "!AccountDetails.UserName"

so it displays till the data has been loaded and then gets swapped out once the data has been loaded.

You can remove the 

accountDetails: AccountDetails = new AccountDetails();

Upvotes: 0

micronyks
micronyks

Reputation: 55443

With first piece of code you need to do following things,

1) Because it should be {{accountDetails.UserName}} (not {{AccountDetails.UserName}} ). NOTE : Please double check with U or u that I can't tell without knowing object's properties.

2) You could also use ?. like {{accountDetails?.UserName}}

I hope this will help.

Upvotes: 1

Related Questions