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

Question

我是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')); 
} 
} 

我试图传递一个让变量和它的工作，所以为什么不它与数组一起工作？

Answer 1

你的错误是使用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); 

Answer 2

你可以使用服务来做到这一点。就像在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; 
} 
... 
} 

Answer 3

它更好使用服务传递嵌套数据。在你的案例计算对象。

您可以创建messageService并侦听更改，如下所示。

import {Injectable} from '@angular/core'; 
import {Observable} from 'rxjs'; 
import {Subject} from 'rxjs/Subject'; 

@Injectable() 

export class LocalMsgService { 

private subject = new Subject(); 

sendMessage(message) { 
    this.subject.next(message); 
} 

clearMessage() { 
    this.subject.next(); 
} 

    getMessage(): Observable<any> { 
    return this.subject.asObservable(); 
    } 
} 

您也可以在home.ts和table.ts页中使用如下

Home.ts

//other imports comes here 
    import {LocalMsgService} from 'services/localMsg'; 


    @Component({ 
     selector: 'home-component', 
     templateUrl: 'home.html' 
    }) 
    export class HomePage { 
     constructor(private msgService: LocalMsgService) { 

      } 

     dataToPass() { 
      console.log(this.averagesList); 
      this.msgService.sendMessage(this.averagesList); 
     } 

    } 

Table.ts

 //other imports comes here 
     import {LocalMsgService} from 'services/localMsg'; 
     import {Subscription} from 'rxjs/Subscription'; 


     @Component({ 
      selector: 'page-table', 
      templateUrl: 'table.html', 
     }) 

     export class TablePage{ 

      items: any; 
      subscription: Subscription; 

      constructor(
      public localMsgService : LocalMsgService) { 
       this.subscription = this.localMsgService.getMessage().subscribe(msg => { 
        this.items = msg; 
       }); 
      } 

     }