在离子2中的页面之间传递一个数组答案

【问题标题】：Passing an array between pages in ionic 2在离子2中的页面之间传递一个数组
【发布时间】：2017-11-06 02:12:18
【问题描述】：

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

【问题讨论】：

标签： angularjs arrays typescript ionic2

【解决方案1】：

最好使用服务来传递嵌套数据。在你的情况下计算对象。

您可以创建 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页面中使用如下

首页.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);
        }

    }

表格.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;
                });
            }

        }

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

您可以使用服务来执行此操作。就像在 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;
}
...
}

【讨论】：