加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

如何在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真实.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读