ionic3获取列表值并以及页面跳转数据的传递

最近初识ionic框架，遇到这么个问题，具体是需要获取列表元素实时的值，并且传递给下一个页面，经过查阅资料，大致流程如下。

 

首先我们再ts文件中创建一个getData函数，并将并设置形参，具体代码如下：

  getData(item: any){
    ...
  }

此时，我们便可以获取到列表元素值，当然我们可以通过console.log()查看一下是否获取到准确的数据。

 

接着我们获取列表元素值，设置点击事件，并在click指令中传入参数，具体代码如下：

<ion-list  *ngFor="let item of datalist" (click)="getData(item)">
    ...
</ion-list>

若传递input信息，例如获取用户密码，则需要双向绑定，具体代码如下：

 <ion-input type="password"  [(ngModel)]="user.j_password" placeholder="请输入密码"></ion-input>

user:UserInfo={
     j_password:'',
     loginType:'APP'
};

  getPassward(user){
    ...
  }

 

而ionic中页面条转传递信息比较简单，最简单的的是通过将数据传递给push方法的第二个参数来将数据传递给下一个页面，结合上面获取列表元素信息并传递给下一个页面，给出如下代码：

userName: any;

goNextpage(item:any){
  this.navCtrl.push('NextPage',{
    userName: item.userName
  });
}

 

传递之后如何在另一个界面获取数据呢，我们可以通过NavParams来接收数据，具体代码如下：

userName: any;

  constructor(public navCtrl: NavController, public navParams: NavParams) {
    this.userName = this.navParams.data.userName;
  }

 

当然ionic3页面之间数据传递方法不止这一个，可以参考https://blog.youkuaiyun.com/qq993284758/article/details/77679283

 

 

资料参考链接：

获取列表值：https://segmentfault.com/q/1010000011333665

页面跳转数据传递：https://blog.youkuaiyun.com/qq993284758/article/details/77679283