Question

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

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”中的内容加载页面？

Answer 1

使用SplashScreen离子组件的.hide（）方法，当api成功或不成功返回响应时，您可能会隐藏splash。

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

Answer 2

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

案例1 如果您的要求是渲染页面并显示数据，那么您可以使用ngif或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

Ionic 2等待observable加载页面

2 个答案: