ionic2-无法使用navcontroller检索/显示数据

Question

I am unable to display the data I get from NavParams . I use console.log() and check that I did get the data I wanted but unable to display in the new page.

I think I might had make some mistake during the passing of data, but not sure what did i do wrong.

Any help is appreciated. Thanks in advanced.

first.ts

import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { LocationsProvider } from '../../providers/locations/locations';

...

    constructor(
        public locations: LocationsProvider,
        public viewCtrl: ViewController,
        public navCtrl: NavController, 
        public actionSheetCtrl: ActionSheetController,
        public http: Http,
        public navParams: NavParams,
    ) { }

    newEntry(param){
        this.navCtrl.push('SecondPage',param);
    }

    openActSheetjob_Type(){
        let actionsheet = this.actionSheetCtrl.create({
            title:"Type",
            buttons:[
                {
                    text: 'Hour',
                    handler: () => {
                        let Hourly = "Hourly";  
                        let results =  this.locations.getData(Hourly);

                        console.log(results); // data goten

                        this.newEntry({ record: results });   //Suspect mistake
                    }
                }
            ]
        });
        actionsheetjob_type.present();
    }

Second.html

<ion-list >
    <ion-item *ngFor="let list of this.results">
        <h2>{{ list.Title }}</h2>
        <p>{{ list.Type }}</p>
    </ion-item>
</ion-list>

Second.Ts

ionViewDidLoad(){
    console.log(this.NP.get("record")); //Get NULL
}

locations.ts

//function to get data
data:any;

getData(jobType){
    if (this.data) {
        return Promise.resolve(this.data);
    }
    return new Promise(resolve => {
        this.http.get('http://localhost/getType.php?Type=' + Type)
        .map(res => res.json())
        .subscribe(data => {
            this.data = data;
            console.log(this.data);
            resolve(this.data);
        });
    });
}

Answer 1

Since getData returns a Promise it is asynchronous. console.log(results) and this.newEntry({ record: results }) will run before results has a value. And with your code it will not even have the value you think. You can get the value in the then function that will be called when the Promise resolves.

handler: () => {
    let Hourly = "Hourly";  
    this.locations.getData(Hourly)
    .then(results => {
        console.log(results);
        this.newEntry({ record: results });
    }
}

Answer 2

in this.navCtrl.push('SecondPage',param); shoud SecondPage import in first.ts file like this should be import{ SecondPage } from '../second/second' and its class name gives to this.navCtrl.push(SecondPage,param);

Hope this should be help!

Answer 3

I am just writing what is working in my case, may be it help you.

 this.navCtrl.push(SecondPage,{item : xyz});//In First Page

and in constructor of second page us

  this.item = params.data.item;// In second page