1

3 つの異なるデータ セットに対して 1 つのビューを備えた Ionic 2 アプリがあります。データはコンストラクターにロードされ、ページパラメーターの変数に基づいて、表示するデータセットが決定されます。

Observable によるデータ呼び出しが成功するたびに、イベント ハンドラーは、データが読み込まれたときに成功をログに記録します。しかし、これは初めてビューをクリック/ロードしたときにのみ機能します。2 回目以降にクリックしても、データは再ロードされません (ログなし)。また、何かをコンソール ログに記録すると、2 回目以降のクリックでは表示されません。

だから、毎回データをロードするために何を変更すればいいのか、コンストラクターがこのようにどのように機能するのか疑問に思います。

これは私のコードがどのように見えるかです。JSON は、namesListProvider から呼び出されます。

@Component({
  templateUrl: '...',
})
export class ListOfNames {

   ...
    private dataListAll: Array<any> = [];
    private dataListFavourites: Array<any> = [];
    private dataListDisliked: Array<any> = [];


constructor(private nav: NavController, ...) {

    ...
    this.loadJsons();
    console.log('whatever');
  }

   loadJsons(){
    this.namesListProvider.getJsons()
    .subscribe(
      (data:any) => {
        this.dataListFavourites = data[0],
        this.dataListDisliked = data[1],
        this.dataListAll = data[2]

         if (this.actualList === 'mainList') {
            this.listOfNames = this.dataListAll;
            this.swipeLeftList = this.dataListDisliked;
            this.swipeRightList = this.dataListFavourites;
         }
         else if (...) {
            ...
         }
         this.listSearchResults = this.listOfNames;


      }, err => console.log('hey, error when loading names list - ' + err),
      () => console.info('loading Jsons complete')      
    )

  }
4

3 に答える 3

4

探しているのは、Ionic2 ページからのライフサイクル イベントです。したがって、使用する代わりにngOnInit、Ionic2 が公開するいくつかのイベントを使用できます。

Page Event        Description
----------        -----------
ionViewLoaded     Runs when the page has loaded. This event only happens once per page being created and added to the DOM. If a page leaves but is cached, then this event will not fire again on a subsequent viewing. The ionViewLoaded event is good place to put your setup code for the page.
ionViewWillEnter  Runs when the page is about to enter and become the active page.
ionViewDidEnter   Runs when the page has fully entered and is now the active page. This event will fire, whether it was the first load or a cached page.
ionViewWillLeave  Runs when the page is about to leave and no longer be the active page.
ionViewDidLeave   Runs when the page has finished leaving and is no longer the active page.
ionViewWillUnload Runs when the page is about to be destroyed and have its elements removed. 
ionViewDidUnload  Runs after the page has been destroyed and its elements have been removed.

あなたの場合、次のionViewWillEnterようにページイベントを使用できます。

ionViewWillEnter {
  // This will be executed every time the page is shown ...
  this.loadJsons();
  // ...
}

編集

そのページに表示するデータを非同期で取得する場合、データの準備が整うまでにどのくらい時間がかかるかわからないため、ユーザーが認識できるように読み込みポップアップを使用することをお勧めしますバックグラウンドで何かが起こっている (データが読み込まれるまで数秒間空白のページを表示する代わりに)。次のように、その動作をコードに簡単に追加できます。

// Import the LoadingController
import { LoadingController, ...} from 'ionic/angular';

@Component({
  templateUrl: '...',
})
export class ListOfNames {

   ...
    private dataListAll: Array<any> = [];
    private dataListFavourites: Array<any> = [];
    private dataListDisliked: Array<any> = [];

    // Create a property to be able to create it and dismiss it from different methods of the class
    private loading: any;


  constructor(private loadingCtrl: LoadingController, private nav: NavController, ...) {

    ...
    this.loadJsons();
    console.log('whatever');
  }

  ionViewWillEnter {
    // This will be executed every time the page is shown ...

    // Create the loading popup
    this.loading = this.loadingCtrl.create({
      content: 'Loading...'
    });

    // Show the popup
    this.loading.present();

    // Get the data
    this.loadJsons();

    // ...
  }

  loadJsons(){
    this.namesListProvider.getJsons()
    .subscribe(
      (data:any) => {
        this.dataListFavourites = data[0],
        this.dataListDisliked = data[1],
        this.dataListAll = data[2]

         if (this.actualList === 'mainList') {
            this.listOfNames = this.dataListAll;
            this.swipeLeftList = this.dataListDisliked;
            this.swipeRightList = this.dataListFavourites;
         }
         else if (...) {
            ...
         }
         this.listSearchResults = this.listOfNames;

      }, err => console.log('hey, error when loading names list - ' + err),
      () => {

        // Dismiss the popup because data is ready
        this.loading.dismiss();

        console.info('loading Jsons complete')}
    )

  }
于 2016-09-13T04:57:53.877 に答える
1

解決策は、コンストラクターでこれを行うのではなく、ngOnInit()代わりに使用することです。コンポーネントは一度だけ作成されるため、コンストラクターは最初に作成されたときにのみ呼び出されます。

コンポーネント クラスは次のOnInitインターフェイスを実装する必要があります。

import { Component, OnInit } from '@angular/core';

@Component({
    templateUrl: '...',
})
export class ListOfNames implements OnInit {
    constructor(...)

    ngOnInit() {
        this.loadJsons();
    }

    private loadJsons() {
        ...
    }
}
于 2016-09-13T00:16:13.270 に答える
0

私はイオンではなく、Angular 2 の世界から来ていますが、Angular 2 には init/destory (ngInit/ngDestory) にコールバックを登録するオプションがあります。初期化を ngInit に移動して、サブスクリプション ハンドラを保存し、destory でサブスクリプションを解除することを忘れないでください。あなたの問題は、あなたが登録解除していないことに関連していると思います.. :\

于 2016-09-12T21:01:53.240 に答える