2017-06-23 3 views
2

私はリモートURLからデータを取得し、それをテンプレートに渡しています。しかし、ページの最初のビューでは、オブジェクトの最初のインデックスは表示されません。2番目のインデックスのみが表示されます。私がタブを離れてそれに戻ると、それは両方のオブジェクトを表示します。そして、私がオブジェクトを記録する際の最初の負荷では、両方ともそこにあります。イオン2テンプレートは、データを購読する前に実行しています

ここで見た後:Angular 2 First Item in Array Missing using *ngFor

私はそれがmissions.tsは、エントリコンポーネントであることに関係していて感じています。しかし、私はそれを削除すると、私は不足している工場についてのエラーを取得します。

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> 

答えて

0

はionViewDidLoadライフサイクルイベントにthis.http.get呼び出してみてください。イオンが結果をレンダリングする準備が整う前に、観察可能なものが最初の結果を返すように聞こえます。これは、イオンがテンプレートをレンダリングする準備が整うまで観察可能なサブスクリプションを延期します。

+0

私はそれを試みましたが、最初の要素はまだ読み込まれません。 http.getのない定義済みの配列であっても、最初の配列は表示されません。 – user2570937

0

この問題を抱えている他の人にとっては、実際にはフォーマットするものでした。何らかの理由で、スクロールコンテンツのdivがマージントップを適用していないし、トップナビゲーションバーの裏に情報を隠していた。私は手動でマージンを追加して、すべてが良いです。

関連する問題