web-dev-qa-db-fra.com

Comment passer des données à Modal ionic 2

Bonjour les gars, j'essaie de transmettre les données de ma vue d'appareil à mon modal (vue détaillée de l'appareil) et de les lier à mon modal, donc si je le fais (click)=openModal() le modal devrait s'ouvrir avec le param sur lequel j'ai cliqué. mais malheureusement, cela vide encore quelqu'un une idée de comment je peux le gérer?

// Source de données et gestionnaire modal

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);
  }

};

// et mes 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);
  }

}
javascripttypescriptionic-frameworkmodal-dialogionic2
11
Alex

Le processus de transmission de données avec le contrôleur modal dans Ionic v3 est différent de la transmission de données avec le contrôleur Nav. La principale différence est que vous transmettez des données avec une clé et une valeur.

Vous devriez faire ceci:

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

et sur votre constructeur modal:

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