在订阅数据之前运行的 ionic 2 模板答案

【问题标题】：ionic 2 template running before subscribe data在订阅数据之前运行的 ionic 2 模板
【发布时间】：2017-11-26 10:26:42
【问题描述】：

我正在从远程 URL 获取数据并将其传递给我的模板。然而，在页面的初始视图中，它没有显示对象的第一个索引，只有第二个。当我离开选项卡并返回它时，它会显示两个对象。当我记录对象时，它们都在那里。

看完这里：Angular 2 First Item in Array Missing using *ngFor

我觉得这可能与missions.ts 作为入口组件有关。但是当我删除它时，我得到一个关于缺失工厂的错误。

任务.ts

missions: any;
  constructor(public navCtrl: NavController, public navParams: NavParams, public http: Http, private storage: Storage) {
    this.http.get('http://hunt/api/getMissions').map(res => res.json()).subscribe(data => {
            this.missions = data;
            console.log(data);
        }); 
  }

任务.html

<ion-content>
  <ion-list>
    <button ion-item *ngFor="let mission of missions" (click)="selectMission(mission.id)">
    {{ mission.name }}
  </button>  
  </ion-list>
</ion-content>

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

尝试在 ionViewDidLoad 生命周期事件中调用 this.http.get。听起来 observable 在 ionic 准备好渲染结果之前返回了第一个结果。这将延迟 observable 的订阅，直到 ionic 准备好渲染模板。

【讨论】：

我已经尝试过了，它仍然没有加载第一个元素。即使在没有 http.get 的已定义数组中，它仍然不会显示第一个。

【解决方案2】：

对于遇到此问题的其他人来说，这实际上是一个格式化问题。由于某种原因，滚动内容 div 没有应用边距顶部，而是将信息隐藏在顶部导航栏后面。我只是手动添加了边距，一切都很好。

【讨论】：