Question

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

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

我觉得它可能与使用任务有关。它是一个入口组件。但当我删除它然后我得到一个错误的工厂错误。

missions.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);
        }); 
  }

Missions.html

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

Answer 1

尝试在ionViewDidLoad生命周期事件中调用this.http.get。听起来，在离子准备好渲染结果之前，观察者正在返回第一个结果。这将延迟对可观察量的订阅，直到离子准备好呈现模板。

Answer 2

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

在订阅数据之前运行离子2模板

2 个答案: