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

Question

我有一个服务,它使用其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">

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

Answer 1

一种方法是使用该ngIf指令。

就像是...

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

然后该元素将不会在页面中呈现，直到为user.avatar真。