Tenho uma lista e um cadastro. O Cadastro é uma modal e funciona bem:
A View do Cadastro:
<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>
o TS da 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 });
}
}
E a listagem onde tudo acontece.
Primeiro a View dela:
<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>
Este é o TS desta listagem com os botões de cadastro, editar e deletar:
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');
}
}
Bem, quero pegar os dados da listagem, abrir a modal com os dados selecionados e poder editar ou cancelar. O trecho desta abordagem que estou tentando é este aqui:
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);
});
}
Mas imprime o console desta forma, com os dados que selecionei mesmo:
{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
Mas dá os erros a seguir:
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
Desta forma a seguir, consigo pegar cada um dos campos do 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"]);
Que são justamente os [(ngModel)]= do formulário Modal. Ou seja, como posso passar esses dados ao formulário modal para estes ngModel?