我是Ionic 2的新手,我在页面间传递数据时遇到了麻烦。在我的Home.ts文件中,我有一个全局数组,其中包含我计算的一些数字,我想将它传递给我的Table.ts文件,以便在带有* ngFor方法的HTML表格中显示它。
这是Home.ts中的函数,我填充数组并尝试推送(我将跳过计算,因为我知道它们是正确的。)
`import { Component } from '@angular/core';
import { AlertController } from 'ionic-angular';
import { IonicPage,NavController, NavParams} from 'ionic-angular';
import {Table} from '../table/table';
export class HomePage {
averagesList: Array <number> =[];
constructor(public alerCtrl: AlertController,
public navCtrl: NavController,
public navParams: NavParams)
{}
Calculate(){
var Averages=[];
//Calculations on the 'Averages' Array
this.averagesList = Averages;
this.navCtrl.push(Table,this.averagesList);
}
}
所以我尝试在我的Table.ts文件中打印它,但它给了我未定义的结果
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import {HomePage} from '../home/home';
@IonicPage()
@Component({
selector: 'page-table',
templateUrl: 'table.html',
})
export class Table{
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log(this.navParams.get('averagesList'));
}
}
我尝试传递一个let变量并且它有效,那么为什么它不适用于数组?
答案 0 :(得分:0)
您可以使用服务来执行此操作。就像在angular2中一样,您可以在构造函数中导入服务并使用这样的属性。
import {OnInit} from '@angular/core';
import {someService} from ./somepath;
...
export class someClass implements OnInit{
let myTmpVar; //we will capture the shared data in this variable
constructor (private smService: someService){ ... }
ngOnInit{
this.myTmpVar = this.smService.SharedServiceData;
}
...
}
答案 1 :(得分:0)
您的错误是使用console.log(this.navParams.get('averagesList'));
这里'averagesList'是关键。
为此,您需要发送:
this.navCtrl.push(Table,{'averagesList' : this.averagesList});
否则:
如果您直接发送
this.navCtrl.push(Table,this.averagesList);
您可以像这样检索值:
console.log(this.navParams.data);
答案 2 :(得分:0)
最好使用服务传递嵌套数据。在你的案例计算对象。
您可以创建messageService并收听更改,如下所示。
pressure_hpa
可以在home.ts和table.ts页面中使用,如下所示
Home.ts
wind_speed_kt
Table.ts
wind_dir_degree