如何在Angular 2中收到服务数据之前延迟组件实例化?
发布时间:2020-12-17 10:23:14 所属栏目:安全 来源:网络整理
导读:我有一个服务,它使用get方法从服务器获取数据: export class UserService implements IRestServiceUser { constructor(public http: Http) { } get(): Rx.ObservableUser { return this.http.get('api/ui_user',any { headers: {'Accept': 'application/jso
我有一个服务,它使用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真实. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |