ionic2 - 无法使用导航控制器检索/显示数据答案

【问题标题】：ionic2 - unable to retrieve/display data using navcontrollerionic2 - 无法使用导航控制器检索/显示数据
【发布时间】：2022-03-17 01:12:29
【问题描述】：

我无法显示从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);
        });
    });
}

【问题讨论】：

标签： angular typescript ionic-framework ionic2

【解决方案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 });
    }
}

【讨论】：

【解决方案2】：

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

希望这会有所帮助！

【讨论】：

恐怕这不正确。如果您使用延迟加载页面/模块，则必须使用页面的字符串名称（'SecondPage' 而不是SecondPage）。

【解决方案3】：

我只是在写我的情况，可能对你有帮助。

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

在第二页的构造函数中

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

【讨论】：