Ionic 2 等待 observable 加载页面答案

【问题标题】：Ionic 2 wait for observable to load pageIonic 2 等待 observable 加载页面
【发布时间】：2017-06-20 01:43:20
【问题描述】：

我有一个页面调用 API 以获取要显示的一些对象，我在构造函数中调用 api 并订阅它，但在我获取任何数据之前页面完成加载，没有任何显示。

constructor(public navCtrl: NavController, public userData: UserData, public navParams: NavParams, public profissional: ProfissionalData) {
  this.return_values_horarios_livres()
  console.log(this.lista_profissional)
}

return_values_horarios_livres(){
  return this.profissional.get_horarios_livres(this.clinica_id, this.especialidade_id).subscribe(
  data => { this.lista_profissional = data.objects;  this._save = data.objects; console.log("pegou aqi"); console.log(data.objects); console.log(this.lista_profissional)},
  err => {},
  ()=>{}
  )
}

该控制台日志打印未定义，这意味着尚未加载数据。

如何等待变量“lista_profissional”中的内容加载页面？

【问题讨论】：

使用路由定义的resolve中的数据加载。
我前两天回答了一个类似的问题，看这里：
stackoverflow.com/questions/44598346/…

标签： angular ionic2 observable

【解决方案1】：

您可以根据自己的要求以多种方式处理这些问题

案例 1 如果您的要求是呈现页面并显示数据而不是使用 ngif 或 switch，我会更喜欢 switch

 <div [ngSwitch]='status'>
        <div *ngSwitchCase="'loading'">
          // you use simple text or some directive 
           <div>loading<div>
        </div>
        <div *ngSwitchCase="'active'">
            <form>
                <!-- the login inputs from earlier -->
            </form>
        </div>
    </div>

组件

return_values_horarios_livres(){
  return this.profissional.get_horarios_livres(this.clinica_id, this.especialidade_id).subscribe(
  data => { this.lista_profissional = data.objects;  this._save = data.objects; console.log("pegou aqi"); console.log(data.objects); console.log(this.lista_profissional)},
  this.status = 'active';
  err => {},
  ()=>{}
  )
}

案例2 如果您的要求是首先加载数据并在渲染模板之后，您可以在 Angular2 中使用 Resolvers

https://stackoverflow.com/a/44437868/4667424

【讨论】：

我最终使用了 ngIf，但其他选项也可以解决它。感谢您的回复。

【解决方案2】：

您可以在 api 是否成功返回响应时隐藏启动画面，使用 SplashScreen Ionic 组件的 .hide() 方法。

您可以使用 *ngIf 指令从模板中隐藏组件，直到服务器响应为止。

【讨论】：