如何将数据传递到模态离子2



你好,我要试图将数据从我的设备视图传递到我的模态(设备详细视图)并将其绑定到我的模态,因此,如果我执行(click)=openModal(),则模态应与我的参数打开点击。但是不幸的是,它仍然空无一人的人知道我怎么能处理它?

//数据源&模态处理程序

import { Component } from '@angular/core';
import { ModalController, Platform, NavParams, ViewController,NavController } from 'ionic-angular';
import { ModalPage } from '../modal/modal';
@Component({
  selector: 'page-deviceslist',
  templateUrl: 'devicelist.html'
})
export class DevicesListPage {
  devices;
  device;
  constructor(
    public  modalCtrl: ModalController,
    public nav: NavController,
    public params: NavParams,
  ) {
    this.devices = [
      {
        title: 'Küche',
        items: [
          {title: 'KüchenAid', consumption:'32 W', checked:'true'},
          {title: 'Thermomix', consumption:'0 W', checked:'false'}
        ]
      },
      {
        title: 'Wohnzimmer',
        items: [
          {title: 'Fernseher',consumption:'0 W', checked:'false'},
          {title: 'Stehlampe',consumption:'60 W', checked:'true'},
        ]
      }
    ];
      this.device = this.devices[this.params.get('devNum')];
  }
  openModal(deviceNum) {
    let modal = this.modalCtrl.create(ModalPage, deviceNum);
    modal.present();
    console.log(this.device);
      console.log(this.devices);
  }
};

//和我的modal.ts

import { Component } from '@angular/core';
import { ModalController, Platform, NavParams, ViewController } from 'ionic-angular';
@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html'
})
export class ModalPage {
  constructor(
    public platform: Platform,
    public params: NavParams,
    public viewCtrl: ViewController
  ) {
  }
  dismiss(data) {
    this.viewCtrl.dismiss(data);
  }
}

用离子V3中的模态控制器传递数据的过程与使用NAV控制器传递数据不同。主要区别在于,您用密钥和值传递数据。

您应该这样做:

let modal = this.modalCtrl.create(ModalPage, {deviceNum: deviceNum});

以及您的模态构造函数:

constructor(public platform: Platform, params: NavParams,public viewCtrl: ViewController) {
    console.log(params.get('deviceNum'));
}

相关内容

  • 没有找到相关文章

最新更新