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

Posted 2023-03-13

【中文标题】在离子2中的页面之间传递一个数组

【英文标题】：Passing an array between pages in ionic 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 变量并且它有效，那么为什么它不适用于数组？

【参考方案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;

...