How to send data to a modal in Ionic 3 from a Storage?

Asked

Viewed 357 times

0

I have a list and a register. The Register is a modal and works well:

The View of the Register:

<ion-header>

    <ion-navbar color="dark">
        <ion-title>Adiciona Sessão</ion-title>
    </ion-navbar>

</ion-header>


<ion-content padding>

    <ion-list>
        <ion-item>
            <ion-label>Data:</ion-label>
            <ion-datetime displayFormat="DD MMM YYYY" [(ngModel)]="event.month"></ion-datetime>
        </ion-item>
        <ion-item>
            <ion-label>Weight</ion-label>
            <ion-input type="number" [(ngModel)]="sessao.weight"></ion-input> LBS
        </ion-item>
        <ion-item>
            <ion-label>Sessões</ion-label>
            <ion-input type="number" [(ngModel)]="sessao.sessoes"></ion-input> LBS
        </ion-item>
        <ion-item>
            <ion-label>Repetições</ion-label>
            <ion-input type="number" [(ngModel)]="sessao.repeticoes"></ion-input> LBS
        </ion-item>
        <ion-item>
            <ion-label>Notas</ion-label>
            <ion-input type="text" [(ngModel)]="sessao.notas"></ion-input> LBS
        </ion-item>

    </ion-list>

    <div padding>
        <button ion-button full (click)="adicionar(event.month,sessao.weight,sessao.sessoes,sessao.repeticoes,sessao.notas)">Salvar Sessão</button>
    </div>

</ion-content>

the TS of the view:

    import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';



/**
 * Generated class for the SessaoAddPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

interface ISessao{
  data:string;
  weight:string;
  sessoes:number;
  repeticoes:number;
  notas:string;
}

@IonicPage()
@Component({
  selector: 'page-sessao-add',
  templateUrl: 'sessao-add.html',
})
export class SessaoAddPage {

  public event = {
    month: '2018-04-11',
    timeStarts: '06:00',
    timeEnds: '2999-02-20'
  }

  //sessao:ISessao = {data:'', weight:'', sessoes:'', repeticoes:'', notas:''};
  sessoes:ISessao[];

  model: ISessao;
  key:string;

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl: ViewController) {  


      console.log('Data', navParams.get('sessoes'));
      this.sessoes = navParams.get('sessoes');    
  //    console.log(this.model["data"]);
  //    console.log(this.model["weight"]);
  //    console.log(this.model["sessoes"]);
  //   console.log(this.model["repeticoes"]);
  //    console.log(this.model["notas"]);
  //    var weight = this.model["weight"];


  }

  ionViewDidEnter(){   
    var object = this.navParams.get('sessoes');    
    var weight = object["weight"];
  }

  adicionar(month, weight, sessoes, repeticoes, notas){
    this.viewCtrl.dismiss({ data: month, weight: weight, sessoes: sessoes, repeticoes: repeticoes, notas: notas });
  }

}

And the listing where it all happens.

First her View is:

<ion-header>
    <ion-navbar color="dark">
        <button ion-button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
        <ion-title>
            Seções - {{selecionado}}
        </ion-title>

        <ion-buttons end>
            <button ion-button icon-only (click)="cadastraTiposMovimento()">
      <ion-icon name="add"></ion-icon></button>          
        </ion-buttons>
    </ion-navbar>
    <ion-toolbar>
        <b>Movimento: </b>{{selecionado}}
    </ion-toolbar>
</ion-header>

<ion-content>



    <ion-list>
        <ion-item-sliding *ngFor="let sessao of sessoes">
            <ion-item >

                <ion-grid>
                    <ion-row>
                        <ion-col col-12 col-sm class="color_four">
                            Em: {{sessao.data | date:"dd/MM/yy"}}
                        </ion-col>
                    </ion-row>
                </ion-grid>
                <ion-grid>
                    <ion-row>
                        <ion-col col-3 col-sm class="color_one">
                            <b class="text-color-grid">Sessões</b>
                            <p class="text-color-grid-content"><b>{{sessao.sessoes}}</b></p>
                        </ion-col>
                        <ion-col col-5 col-sm class="color_two">
                            <b class="text-color-grid">Repetições</b>
                            <p class="text-color-grid-content"><b>{{sessao.repeticoes}}</b></p>
                        </ion-col>
                        <ion-col col-4 col-sm class="color_three">
                            <b class="text-color-grid">Weight</b>
                            <p class="text-color-grid-content"><b>{{sessao.weight}}</b>
                                <p>
                        </ion-col>
                    </ion-row>
                </ion-grid>
            </ion-item>

            <ion-item-options side="right">                
                <button ion-button color="green" (click)="atualizarSessao(sessao)" >
                   <ion-icon name="ios-create-outline"></ion-icon>
                       Editar
                </button>
                <button ion-button color="danger" (click)="deletarSessao()">
                    <ion-icon name="md-trash"></ion-icon>
                        Apagar
                </button>
            </ion-item-options>
        </ion-item-sliding>

    </ion-list>

</ion-content>

This is the TS of this listing with the sign-up buttons, edit and delete:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ModalController } from 'ionic-angular';
import { SessaoAddPage } from '../sessao-add/sessao-add';
import { TipomovimentoProvider } from '../../providers/tipomovimento/tipomovimento';


/**
 * Generated class for the SessionListPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

 interface ISessao{
   data:string;
   weight:string;
   sessoes:number;
   repeticoes:number;
   notas:string;
 }

@IonicPage()
@Component({
  selector: 'page-session-list',
  templateUrl: 'session-list.html',
})


export class SessionListPage {

  sessoes:ISessao[];
  selecionado: any;

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    public listasessaProvider:TipomovimentoProvider,
    public modalCtrl: ModalController) {

    this.selecionado = this.navParams.get("nomeMovimentoSelecionado");


  }

  ionViewDidEnter(){
    this.sessoes = this.listasessaProvider.listar();
  }


  cadastraTiposMovimento(){
    let profileModal = this.modalCtrl.create(SessaoAddPage);
    profileModal.present();

    profileModal.onDidDismiss(data => {  
      console.log(data);
      this.listasessaProvider.adicionar(data);
    });    
  }

  atualizarSessao(sessao){      
// let profileModal = this.modalCtrl.create(SessaoAddPage, {sessao.data:sessao.data, sessao.weight: sessao.weight, sessao.sessoes: sessao.sessoes, sessao.repeticoes: sessao.repeticoes, sessao.notas: sessao.notas  });
let profileModal = this.modalCtrl.create(SessaoAddPage, {sessoes: sessao });
profileModal.present();

profileModal.onDidDismiss(data => {  
  console.log(data);
 // this.listasessaProvider.adicionar(data);
});

}

  deletarSessao(sessao:ISessao){
    console.log('Clicou em apagar');
  }

}

Well, I want to take the listing data, open the modal with the selected data and be able to edit or cancel. The stretch of this approach I’m trying is this one:

atualizarSessao(sessao){      
// let profileModal = this.modalCtrl.create(SessaoAddPage, {sessao.data:sessao.data, sessao.weight: sessao.weight, sessao.sessoes: sessao.sessoes, sessao.repeticoes: sessao.repeticoes, sessao.notas: sessao.notas  });
let profileModal = this.modalCtrl.create(SessaoAddPage, {sessoes: sessao });
profileModal.present();

profileModal.onDidDismiss(data => {  
  console.log(data);
 // this.listasessaProvider.adicionar(data);
});

}

But print the console this way, with the data I actually selected:

{data: "2018-09-11", weight: "200", sessoes: "20", repeticoes: "2", notas: "teste"}
animation
:
"modal-md-slide-in"
data
:
"2018-09-11"
direction
:
"forward"
minClickBlockDuration
:
400
notas
:
"teste"
repeticoes
:
"2"
sessoes
:
"20"
weight
:
"200"
__proto__
:
Object

But there are mistakes to follow:

SessaoAddPage.html:21 ERROR TypeError: Cannot read property 'weight' of undefined
    at Object.eval [as updateDirectives] (SessaoAddPage.html:25)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)
View_SessaoAddPage_0 @ SessaoAddPage.html:21
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1510
IonicErrorHandler.handleError @ ionic-error-handler.js:61
(anonymous) @ core.js:5925
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
(anonymous) @ core.js:5751
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ core.js:4577
next @ core.js:5751
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:242
SafeSubscriber.next @ Subscriber.js:189
Subscriber._next @ Subscriber.js:129
Subscriber.next @ Subscriber.js:93
Subject.next @ Subject.js:55
EventEmitter.emit @ core.js:4322
checkStable @ core.js:4725
onHasTask @ core.js:4773
t.hasTask @ polyfills.js:3
t._updateTaskCount @ polyfills.js:3
r._updateTaskCount @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
SessaoAddPage.html:21 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 33, nodeDef: {…}, elDef: {…}, elView: {…}}
View_SessaoAddPage_0 @ SessaoAddPage.html:21
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1515
IonicErrorHandler.handleError @ ionic-error-handler.js:61
(anonymous) @ core.js:5925
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
(anonymous) @ core.js:5751
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ core.js:4577
next @ core.js:5751
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:242
SafeSubscriber.next @ Subscriber.js:189
Subscriber._next @ Subscriber.js:129
Subscriber.next @ Subscriber.js:93
Subject.next @ Subject.js:55
EventEmitter.emit @ core.js:4322
checkStable @ core.js:4725
onHasTask @ core.js:4773
t.hasTask @ polyfills.js:3
t._updateTaskCount @ polyfills.js:3
r._updateTaskCount @ polyfills.js:3
r.runTask @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
SessaoAddPage.html:21 ERROR TypeError: Cannot read property 'weight' of undefined
    at Object.eval [as updateDirectives] (SessaoAddPage.html:25)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)
View_SessaoAddPage_0 @ SessaoAddPage.html:21
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1510
IonicErrorHandler.handleError @ ionic-error-handler.js:61
(anonymous) @ core.js:5925
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
(anonymous) @ core.js:5751
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ core.js:4577
next @ core.js:5751
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:242
SafeSubscriber.next @ Subscriber.js:189
Subscriber._next @ Subscriber.js:129
Subscriber.next @ Subscriber.js:93
Subject.next @ Subject.js:55
EventEmitter.emit @ core.js:4322
checkStable @ core.js:4725
onLeave @ core.js:4804
onInvoke @ core.js:4763
t.invoke @ polyfills.js:3
r.runGuarded @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
SessaoAddPage.html:21 ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 33, nodeDef: {…}, elDef: {…}, elView: {…}}
View_SessaoAddPage_0 @ SessaoAddPage.html:21
proxyClass @ compiler.js:14659
DebugContext_.logError @ core.js:15038
ErrorHandler.handleError @ core.js:1515
IonicErrorHandler.handleError @ ionic-error-handler.js:61
(anonymous) @ core.js:5925
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.runOutsideAngular @ core.js:4708
ApplicationRef.tick @ core.js:5925
(anonymous) @ core.js:5751
t.invoke @ polyfills.js:3
onInvoke @ core.js:4760
t.invoke @ polyfills.js:3
r.run @ polyfills.js:3
NgZone.run @ core.js:4577
next @ core.js:5751
schedulerFn @ core.js:4342
SafeSubscriber.__tryOrUnsub @ Subscriber.js:242
SafeSubscriber.next @ Subscriber.js:189
Subscriber._next @ Subscriber.js:129
Subscriber.next @ Subscriber.js:93
Subject.next @ Subject.js:55
EventEmitter.emit @ core.js:4322
checkStable @ core.js:4725
onLeave @ core.js:4804
onInvoke @ core.js:4763
t.invoke @ polyfills.js:3
r.runGuarded @ polyfills.js:3
(anonymous) @ polyfills.js:3
n.microtaskDrainDone @ polyfills.js:3
o @ polyfills.js:3
e.invokeTask @ polyfills.js:3
p @ polyfills.js:2
v @ polyfills.js:2
core.js:1449 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'weight' of undefined
TypeError: Cannot read property 'weight' of undefined
    at Object.eval [as updateDirectives] (SessaoAddPage.html:25)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)
    at Object.eval [as updateDirectives] (SessaoAddPage.html:25)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14697)
    at checkAndUpdateView (core.js:13844)
    at callViewAction (core.js:14195)
    at execComponentViewsAction (core.js:14127)
    at checkAndUpdateView (core.js:13850)
    at callViewAction (core.js:14195)
    at execEmbeddedViewsAction (core.js:14153)
    at checkAndUpdateView (core.js:13845)
    at callViewAction (core.js:14195)
    at c (polyfills.js:3)
    at Object.reject (polyfills.js:3)
    at OverlayPortal.NavControllerBase._fireError (nav-controller-base.js:223)
    at OverlayPortal.NavControllerBase._failed (nav-controller-base.js:216)
    at nav-controller-base.js:263
    at t.invoke (polyfills.js:3)
    at Object.onInvoke (core.js:4760)
    at t.invoke (polyfills.js:3)
    at r.run (polyfills.js:3)
    at polyfills.js:3

This way I can catch each of the fields in the Array:

var object = navParams.get('sessoes');    
      console.log(object["data"]);
      console.log(object["weight"]);
      console.log(object["sessoes"]);
      console.log(object["repeticoes"]);
      console.log(object["notas"]);

That are precisely the [(ngModel)]= of the Modal form. That is, how can I pass this data to the modal form for these ngModel?

javascript angularjs ionic2 ionic3

1 answer

0


Try this :

var object = navParams.get('sessoes'); 
this.sessao = {};
this.sessao.data = object["data"];
this.sessao.weight = object["weight"];
this.sessao.sessoes = object["sessoes"];
this.sessao.repeticoes = object["repeticoes"];
this.sessao.notas = object["notas"];

  • Oi @Luis Fernando Pimento, Oi Luis, não deu, apareceu a mensagem: RROR Error: Uncaught (in Promise): Syntaxerror: Unexpected token o in JSON at position 1 Syntaxerror: Unexpected token o in JSON at position 1 at JSON.parse (<Anonymous>) at new Sessaoaddpage (sessional-add.ts:46)

  • or try : var Object = navParams.get('sessoes'); this.sessao = {}; this.sessao.data = Object["date"]; this.sessao.Weight = Object["Weight"]; this.sessao.sessoes = Object["sessoes"]; this.sessao.repetitions = Object["repetitions"]; this.sessao.notes = Object["notes"];

  • Thank you @Luis Fernando Pimenta!

Browser other questions tagged javascript angularjs ionic2 ionic3

You are not signed in. Login or sign up in order to post.