我有一个服务,它使用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,但文档很差,我无法理解.