在离子2中的页面之间传递数组

时间:2017-06-05 10:14:15

标签: angularjs arrays typescript ionic2

我是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变量并且它有效,那么为什么它不适用于数组?

3 个答案:

答案 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