3

This is a follow on question to a previous question I asked here: Exception: ObjectUnsubscribedError when working with Observables with RxJS and Angular2

In my component I wait for data to arrive from a service I have written that makes http requests to a REST Service. In my component view I reference the data that is returned thus... in my component

import {Component} from 'angular2/core';
import {ROUTER_DIRECTIVES} from 'angular2/router';
import {UserContact, UserStatus} from '../../types/types';
import {UserDataService} from '../../services/user-data/UserDataService';

@Component({
    selector: 'top-navigation',
    directives: [...ROUTER_DIRECTIVES],
    template: require('./top-navigation.html')
})

export class TopNavigation {

    public currentUser: UserStatus;

    constructor(public userDataService: UserDataService) {
        // subscribe to the loginInUser observable to be notified when the current user is updated
        this.userDataService.loginInUser.subscribe(
            (currentUser) => {
                this.currentUser = currentUser;
                console.log(this.currentUser);
            });
    }

}

In my HTML I have the following (in this case top-navigation.html) I have the following code, look how I use the currentUser data as [src] for an image:

<nav> 
    <img [routerLink]="['Profile']" [src]="currentUser.profilePicture" class="img-circle nav-profile-img"
         [ngClass]="{'gold-profile-pic': currentUser.goldUser, 'basic-profile-pic': !currentUser.goldUser}">
    <a [routerLink]="['Profile']">Me</a>
    <a [routerLink]="['Postbox']">Postbox</a>
    <a [routerLink]="['Friends']">Friends</a>
    <a [routerLink]="['Games']">Games</a>
    <a [routerLink]="['Photos']">Photos</a>
</nav>

Now as the original value for currentUser is null and thus [src]="currentUser.profilePicture" will be undefined I get a error like so: 

EXCEPTION: TypeError: Cannot read property 'profilePicture' of null in [currentUser.profilePicture in TopNavigation@9:40]
ORIGINAL EXCEPTION: TypeError: Cannot read property 'profilePicture' of null

I thought by using [src] like ng-src in Angular1.* would prevent such an error and update once the [src] has a value (in the console log a valid http src is within the object). I must be doing something wrong?

Many thanks for the advice in advance.

Community
  • 1
  • 1
Mike Sav
  • 14,805
  • 31
  • 98
  • 143

1 Answers1

2

You can add an ngIf on your element like this:

<nav *ngIf="currentUser">
  <img [routerLink]="['Profile']" [src]="currentUser.profilePicture" class="img-circle nav-profile-img"
     [ngClass]="{'gold-profile-pic': currentUser.goldUser, 'basic-profile-pic': !currentUser.goldUser}">
  (...)
</nav>

Within expression, you can't access a property on an object if it's null out of the box. You can use the ? (Elvis operator) as described below:

<img [routerLink]="['Profile']" [src]="currentUser?.profilePicture"
Thierry Templier
  • 198,364
  • 44
  • 396
  • 360
  • I thought that may be the answer but I didn't need to use it before. This is the first time I have heard of the 'Elvis operator'. – Mike Sav Feb 23 '16 at 15:02
  • @MikeSav, the Elvis operator is mentioned in the template dev guide: https://angular.io/docs/ts/latest/guide/template-syntax.html#!#expression-operators – Mark Rajcok Feb 23 '16 at 21:13