1

I've used AngularJS a lot in the past, but Angular2 is a whole new world for me.. and I've not quite gotten it down.

I have a home.ts and a home.html

Inside my home.ts I have this: 

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  userData:any;

  constructor(
    public navCtrl: NavController,
    private storage: Storage,
    private database: AngularFireDatabase) {
      this.storage.get('user').then((result) => {
        this.userData = result;
      });

  }

I have a localstorage variable for the user, and I'm assigning it to userData..

Inside my .html file, I have a span that I'd like to populate with info from the userData variable... I thought it would be as easy as doing this:

<span id="userName">{{userData.firstName}}</span>

but I just get a ton of errors Cannot read property 'firstName' of undefined...

How can I get the userData variable into my html? Thanks!

Simon
  • 2,498
  • 3
  • 34
  • 77
  • 1
    Are you sure , you userData is not undefined ? means userData geeting the data from localstorage ? – Aravind S Feb 22 '18 at 03:54
  • I would recommend shifting `storage.get` to the `ngOnInt` lifecycle hook. [Why?](https://stackoverflow.com/questions/35763730/difference-between-constructor-and-ngoninit) This will allow for re-fetching of your localStorage data everytime this component gets displayed to screen instead of only once at the beginning of the application spin up time. – Zze Feb 22 '18 at 03:59

2 Answers2

4

You have to wait till the this.storage.get('user') is resolved, before your then is executed userData is undefined and you are trying to do userData.firstName which is giving the error Cannot read property 'firstName' of undefined..

You can do

<span *ngIf="userData" id="userName">{{userData.firstName}}</span>

So you wait for your promise to resolve sand then show that value on the screen.

Pavan Bahuguni
  • 1,947
  • 1
  • 15
  • 21
1

What I typically do in this scenario is use the elvis operator in my binding. What that would look like for you is:

<span id="userName">{{userData?.firstName}}</span>

The problem is Angular is trying to render the value but since this step is occuring while your async request is still resolving, it tries to access the first name property on an undefined property - hence it throws the exception you are seeing.

Something else you could do (less preferred imo) is to set an initial value to userData. For example:

userData: any = {};
Alex
  • 325
  • 1
  • 7
  • Thanks, this worked as well, I gave the answer to the other question but this might be cleaner.. Thank you! – Simon Feb 22 '18 at 04:04
  • No problem at all! I prefer the ?. syntax as it's more familiar / translatable to developers acccustomed to C#. On a display form with multiple properties, it's also significantly easier to implement this syntax rather than using the *ngIf directive on 10+ elements (it also doesn't require a wrapping element such as a span) – Alex Feb 22 '18 at 04:10