Prevent error rendering to View when waiting for Async / REST data from a Service - RxJS / Angular2

问题

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.

回答1:

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"

来源：https://stackoverflow.com/questions/35580852/prevent-error-rendering-to-view-when-waiting-for-async-rest-data-from-a-servic

标签

typescript

angular

rxjs