I have a list and a registration. Cadastro is a modal and works well:
The Register View:
<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>
view's TS:
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 everything happens.
First her View:
<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 registration, edit and delete buttons:
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 get the data from the listing, open the modal with the selected data and be able to edit or cancel. The snippet 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 it prints the console this way, with the data I've selected myself:
{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 it gives the following errors:
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
In this way, I can get each of the Array fields:
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"]);
What are just the [(ngModel)] = of the Modal form. That is, how can I pass this data to the modal form for these ngModel?