prevent错误呈现从服务等待异步/ REST数据时查看 - RxJS / Angular2 [英] Prevent error rendering to View when waiting for Async / REST data from a Service - RxJS / Angular2

问题描述

这是问题的一个previous问题，我问这里如下：<一href=\"http://stackoverflow.com/questions/35579662/exception-objectunsubscribederror-when-working-with-observables-with-rxjs-and-a\">Exception: ObjectUnsubscribedError与观测量正与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

在我的组件我等待数据从我写了一个服务，使HTTP请求到REST服务到达。在我的组件视图中我引用因此返回的数据......在我的组件

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);
            });
    }

}

在我的HTML我有以下的（在这种情况下，顶级navigation.html）我有以下的code，看我如何使用的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>

现在作为的currentUser原值为空，因此 [来源] =currentUser.profilePicture是不确定的，我得到一个错误，像这样：

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

我想用[来源]像Angular1 NG-SRC。*将$一旦[来源] p $ pvent这样的错误和更新有一个值（在控制台登录有效的HTTP src为对象范围内） 。我必须做一些错误的？

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.

推荐答案

您可以将元素添加ngIf是这样的：

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>

在EX pression，你不能在对象上，如果它是空的开箱访问属性。您可以使用 （Elvis操作符），如下所述：

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" 

这篇关于prevent错误呈现从服务等待异步/ REST数据时查看 - RxJS / Angular2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！