Question

我无法显示从NavParams获得的数据。我使用console.log()并检查我是否确实获得了我想要的数据但无法在新页面中显示。

我想我可能在传递数据时犯了一些错误，但不确定我做错了什么。

感谢任何帮助。谢谢你提前。

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

由于getData返回Promise，因此它是异步的。 console.log(results)和this.newEntry({ record: results })将在results具有值之前运行。使用您的代码，它甚至没有您想到的价值。您可以在then结算时调用的Promise函数中获取值。

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

Answer 2

在this.navCtrl.push('SecondPage',param);中，在first.ts文件中的第二页导入应该是import{ SecondPage } from '../second/second'并且其类名提供给this.navCtrl.push(SecondPage,param);

希望这应该有所帮助！

Answer 3

我只是在写我的案例中的工作，可能对你有帮助。

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

并在第二页的构造函数中

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

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

3 个答案: