Question

我的工作流程在登录后，导航到配置文件页面，在该页面中调用配置文件API并将其呈现为HTML。问题是我在很短的时间内从API获得结果，但HTML渲染需要很长时间才能渲染大约10-15秒。当我在个人资料页面上刷新时，它会立即呈现HTML。我可能在这里做错了什么。

HTML：

<div class="row">
    <div class="col-md-12">
        <div>{{profiles.name}}</div>
    </div>
    <div class="col-md-12">
        <div>{{profiles.email}}</div>
    </div>
</div>

JS：

ngOnInit() {
    this.profilesService.getProfiles()
    .subscribe(res => {
        // console.log(res);
        if(!res.err){
            this.profiles = res.data[0];
            // console.log(this.profiles);
        }
    });
}

Answer 1

JS:

//define profile variable as Observable
profiles: Observable<any>

ngOnInit() {
    this.profiles = this.profilesService.getProfiles()
    .map(res => {
      //take only .data[0]
        return res.data[0]
    });
}

HTML
<div class="row">
    <div class="col-md-12">
        <div>{{(profiles | async)?.name}}</div>
    </div>
    <div class="col-md-12">
        <div>{{(profiles | async)?.email}}</div>
    </div>
</div>

Angular 2数据绑定首次发布问题

1 个答案: