如何在Angular 2中收到服务数据之前延迟组件实例化？

我有一个服务,它使用get方法从服务器获取数据：

export class UserService implements IRestService<User> {
    constructor(public http: Http) {
    }

    get(): Rx.Observable<User> {
        return this.http.get('api/ui_user',<any> {
            headers: {'Accept': 'application/json'}
            })
            .toRx()
            .map(res => res.json());
    }

我有一个使用此服务的组件.

constructor(emplService: EmployeesService,userService: UserService){
    this.emplService = emplService;
    this.isdisplayMenu = false;
    this.user = new User();

    userService.get()
        .subscribe(usr => {
            this.user = usr;
        });
}

因为数据是异步获取的,所以组件被实例化并呈现,并且仅在接收到该数据之后. View会被数据填充并最终看起来不错,但起初我在控制台中有错误：

GET data:image/png;base64,undefined net::ERR_INVALID_URL

它发生在我看来：

<img class="user-avatar" [src]="'data:image/png;base64,' + user.avatar">

我希望组件在呈现自身之前等待直到收到数据.这可能吗？我在考虑lifecycle hooks,但文档很差,我无法理解.

一种方法是使用 ngIf指令.

就像是…

<img *ngIf="user.avatar" class="user-avatar" [src]="'data:image/png;base64,' + user.avatar">

然后,元素将不会在页面中呈现,直到user.avatar真实.