Clase 28 de 36 • Curso Básico de Ionic 2018
Contenido del curso
yhoiner Morales Rios
MEGATRIX LABS
Juan Guillermo Perez Cardozo
Edgar Santiago
Ezequiel Portela
Edgar Santiago
Albert Jiménez
Claudio Ariel Sosa
Gabriel Pérez Moreno
juan david jaramillo zuñiga
Guillermo Alfonso Silva Hernandez
Edward Steven Ramos Palacios
Santiago Yunda Rivera
Carlos Uriel de Jesus Sánchez González
Yolher Camilo Albeiro Hernandez Reyes
César Rodolfo Vicuña Méndez
Santiago Yunda Rivera
Gabriel Antonio Bermúdez Arana
Gabriel Solorzano
MEGATRIX LABS
Diego Forero
Leonardo Daniel Benitez Cuenca
Gustavo Alfredo Palomino Castellanos
Yolher Camilo Albeiro Hernandez Reyes
Jhoseph Stanly Arango Garcia
Cristhian Tarazona
Marco Antonio Orta Bustamante
Ana Maria Cubides Acosta
Fabiola Dayana Acarapi Alvarez
Fabiola Dayana Acarapi Alvarez
Fernando Ontiveros
Gracias @ezeportela y @Edd1721, con sus dos grandes aportes el còdigo para evitar el error en el navegador lo solucioné así:
en home.html
@Yhoiner91 Hola! me podrían ayudar con este error...
la verdad no lo hice de la forma que explico el profesor eduardo , porque ahora ionic va en 4. https://www.youtube.com/watch?v=H20l9ofyR54
Saludos, no me está funcionando. Me sale el siguiente error:
LugarPage.ngfactory.js:40 ERROR TypeError: Cannot read property ‘nombre’ of undefined
at Object.eval [as updateDirectives] (LugarPage.ngfactory.js:193)
at Object.debugUpdateDirectives [as updateDirectives] (vendor.js:15382)
at checkAndUpdateView (vendor.js:14529)
at callViewAction (vendor.js:14880)
at execComponentViewsAction (vendor.js:14812)
at checkAndUpdateView (vendor.js:14535)
at callViewAction (vendor.js:14880)
at execEmbeddedViewsAction (vendor.js:14838)
at checkAndUpdateView (vendor.js:14530)
at callViewAction (vendor.js:14880)
Este es mi código:
<!-- Generated template for the LugarPage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation. --> <ion-header> <ion-navbar> <ion-title>Lugar</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> <ion-label floating>Nombre</ion-label> <ion-input type="text" [(ngModel)]="lugar.nombre"></ion-input> </ion-item> <ion-item> <ion-label floating>Dirección</ion-label> <ion-input type="text" [(ngModel)]="lugar.direccion"></ion-input> </ion-item> <ion-list> <ion-item> <ion-label>Categoría</ion-label> <ion-select [(ngModel)]="lugar.categoria"> <ion-option value="AireLibre">Aire Libre</ion-option> <ion-option value="LugarCerrado">Lugar Cerrado</ion-option> </ion-select> </ion-item> </ion-list> <ion-item> <ion-label floating>Descripción</ion-label> <ion-textarea [(ngModel)]="lugar.descripcion"></ion-textarea> </ion-item> </ion-list> <button ion-button full (click)="guardarLugar()">Guardar Lugar</button> </ion-content> <code>
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { TerceraPage } from '../tercera/tercera'; /** * Generated class for the LugarPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-lugar', templateUrl: 'lugar.html', }) export class LugarPage { lugar: any = {}; constructor(public navCtrl: NavController, public navParams: NavParams) { this.lugar = navParams.data.lugar; // get('lugar'); } guardarLugar(){ console.log(this.lugar); } } <code>
<ion-header> <ion-navbar> <ion-title> Ionic Blank </ion-title> </ion-navbar> </ion-header> <ion-content> <ion-list> <ion-item *ngFor="let lugar of lugares" (click)="irAVistaDeDetalleExistente(place)"> <h2>{{lugar.nombre}}</h2> <h3>{{lugar.direccion}}</h3> <p>{{lugar.categoria}}</p> </ion-item> </ion-list> <ion-fab right bottom> <button ion-fab (click)="irAVistaDeDetalle({})"><ion-icon name="add"></ion-icon></button> </ion-fab> </ion-content> <code>
import { Component } from '@angular/core'; import { NavController } from 'ionic-angular'; import { LugarPage } from '../lugar/lugar'; @Component({ selector: 'page-home', templateUrl: 'home.html' }) export class HomePage { lugares: any = [ {mombre: 'Lugar 1', direccion: 'Direccion 1', categoria: 'Categoria 1'}, {mombre: 'Lugar 2', direccion: 'Direccion 2', categoria: 'Categoria 2'}, {mombre: 'Lugar 3', direccion: 'Direccion 3', categoria: 'Categoria 3'}, ]; constructor(public navCtrl: NavController) { } navegarALugar(name){ this.navCtrl.push(LugarPage, {nombre: name}); } irAVistaDeDetalle(){ this.navCtrl.push(LugarPage, {lugar: {}}); } irAVistaDeDetalleExistente(lugar){ this.navCtrl.push(LugarPage, {lugar: lugar}); } } <code>
Hola Edgar, como estás?
El problema esta en el archivo lugar.ts, particularmente en la línea
constructor(public navCtrl: NavController, public navParams: NavParams) { this.lugar = navParams.data.lugar; // get('lugar'); }
Al crear un nuevo lugar, el parametro navParams.data.lugar llega vacío por lo que al poner nombre en el ngModel llega como undefined porque no existe como objeto, para poder solucionarlo podes hacerlo de esta forma:
constructor(public navCtrl: NavController, public navParams: NavParams) { this.lugar = navParams.data.lugar || {}; }
Saludos
Oh!! Excelente, muchas gracias Ezequiel!
Muy bien explicado 😃 Excelente
Tengo problema, un error que no puedo solucionar
Runtime Error
Cannot read property ‘nombre’ of undefined
Stack
TypeError: Cannot read property ‘nombre’ of undefined
at Object.eval [as updateDirectives] (ng:///AppModule/LugarPage.ngfactory.js:190:32)
at Object.debugUpdateDirectives [as updateDirectives] ()
at checkAndUpdateView ()
at callViewAction ()
at execComponentViewsAction ()
at checkAndUpdateView ()
at callViewAction ()
at execEmbeddedViewsAction ()
at checkAndUpdateView ()
at callViewAction ()
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { TerceraPage } from"../tercera/tercera"; import { LugaresService } from '../../services/lugares.service'; /** * Generated class for the LugarPage page. * * See https://ionicframework.com/docs/components/#navigation for more info on * Ionic pages and navigation. */ @IonicPage() @Component({ selector: 'page-lugar', templateUrl: 'lugar.html', }) export class LugarPage { lugar: any ={}; constructor(public navCtrl: NavController, public navParams: NavParams, public LugaresService: LugaresService) { this.lugar = navParams.get("lugar"); } guardarLugar(){ this.lugar.id= Date.now(); this.LugaresService.createLugar(this.lugar); console.log(this.lugar); } }
<!-- Generated template for the LugarPage page. See http://ionicframework.com/docs/components/#navigation for more info on Ionic pages and navigation. --> <ion-header> <ion-navbar> <ion-title>lugar</ion-title> </ion-navbar> </ion-header> <ion-content padding> <ion-list> <ion-item> <ion-label floating>Lugar</ion-label> <ion-input type="text" [(ngModel)]="lugar.nombre"></ion-input> </ion-item> <ion-item> <ion-label floating>Direccion</ion-label> <ion-input type="text" [(ngModel)]="lugar.direccion"></ion-input> </ion-item> </ion-list> <ion-list> <ion-item> <ion-label>Categoria</ion-label> <ion-select [(ngModel)]="lugar.categoria"> <ion-option value="aireLibre">Aire Libre</ion-option> <ion-option value="lugarCerrado">Lugar Cerrado</ion-option> </ion-select> </ion-item> </ion-list> <ion-item> <ion-label floating>Descripcion</ion-label> <ion-textarea [(ngModel)]="lugar.descripcion"></ion-textarea> </ion-item> <button ion-button full (click)="guardarLugar()">Guardar Lugar</button> </ion-content>
Hola Sosa, yo resolvi el problema de la siguiente manera:
<ion-content padding> <ion-item> <ion-label floating>Nombre</ion-label> <ion-input type="text" [(ngModel)]="lugar.nombre"></ion-input> </ion-item> <ion-item> <ion-label floating>Dirección</ion-label> <ion-input type="text" [(ngModel)]="lugar.direccion"></ion-input> </ion-item> <ion-list> <ion-item> <ion-label>Categoría</ion-label> <ion-select [(ngModel)]="lugar.categoria" > <ion-option value="Aire Libre" >Aire Libre</ion-option> <ion-option value="Lugar Cerrado" >Lugar Cerrado</ion-option> </ion-select> </ion-item> </ion-list> <ion-item> <ion-label floating>Descripción</ion-label> <ion-textarea [(ngModel)]="lugar.descripcion"></ion-textarea> </ion-item> </ion-list> <button ion-button full (click)="guardarLugar(lugar)">Guardar Lugar</button> </ion-content>
@IonicPage() @Component({ selector: 'page-lugar', templateUrl: 'lugar.html', }) export class LugarPage { lugar: any = {}; base64Image: string; constructor( public navCtrl: NavController, public navParams: NavParams, public lugaresService: LugaresService ) { this.lugar = navParams.data.lugar; } ionViewDidLoad() { console.log('ionViewDidLoad LugarPage'); } guardarLugar(lugar) { if (!lugar.id) { lugar.id = Date.now(); } this.lugaresService.createLugar(lugar); this.navCtrl.pop(); console.log(lugar); } navigateBack() { this.navCtrl.pop(); } navigateToAbout() { this.navCtrl.push(AboutPage) } }
tengo el mismo error y no he podido resolverlo
alguien que pudiese ayudarme con este error
Unable to get property ‘nombre’ of undefined or null reference al parecer es el mismo problema que se le presento a ClaudioArielSosa
@memosilva revisa que en tu método click del home.html envies un argumento. Por ejemplo:
Cuando es el botón de add envias un objeto vacio: goPlaceDetail({})
Cuando es el método dentro del for enviar el objeto en si: goPlaceDetail(place)
<ion-content padding> <ion-list> <ion-item *ngFor="let place of places" (click)="goPlaceDetail(place)"> <h2>{{place.name}}</h2> <h3>{{place.address}}</h3> <p>{{place.category}}</p> </ion-item> </ion-list> <ion-fab bottom right> <button ion-fab mini (click)="goPlaceDetail({})"><ion-icon name="add"></ion-icon></button> </ion-fab> </ion-content>```
por alguna razón no me cargan las imagenes. les dejo el enlace donde tengo las imagenes en mega. agradezco sus opiniones
hay que tomar el curso de angular primero
Hola a todos, alguien sabe como puedo solucionar este error , gracias.
compiler.js:486 Uncaught Error: Can’t resolve all parameters for LugaresService: (?).
at syntaxError (compiler.js:486)
at CompileMetadataResolver._getDependenciesMetadata (compiler.js:15706)
at CompileMetadataResolver._getTypeMetadata (compiler.js:15541)
at CompileMetadataResolver._getInjectableMetadata (compiler.js:15521)
at CompileMetadataResolver.getProviderMetadata (compiler.js:15881)
at compiler.js:15792
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (compiler.js:15752)
at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15320)
at JitCompiler._loadModules (compiler.js:34413)
me aparece este error, me percaté que el error desaparace cuando no declaro en el constructor de lugar.ts el servicio lugaresService
Les comparto como lo he estado haciendo.
Estoy usando
lugares.services.ts:
import { Injectable } from '@angular/core'; import { AngularFirestore, AngularFirestoreCollection, AngularFirestoreDocument } from '@angular/fire/firestore'; import { Lugar } from '../interfaces/lugar.interface'; import { Observable } from 'rxjs'; import { map } from 'rxjs/operators'; import { ToastController } from '@ionic/angular'; @Injectable({ providedIn: 'root' }) export class LugaresService { private lugaresColeccion: AngularFirestoreCollection<any>; private lugarDocument: AngularFirestoreDocument; public lugares: any[] = []; constructor( private afs: AngularFirestore, private toastController: ToastController ) { // accedemos a la colecion 'lugares' this.lugaresColeccion = this.afs.collection<Lugar>('lugares'); } async presentToast( mensaje ) { const toast = await this.toastController.create({ message: mensaje, color: 'dark', duration: 2000, showCloseButton: true, position: 'bottom', closeButtonText: 'cerrar' }); toast.present(); } getLugares() { /** como lo que obtenemos de firebase es un arreglo de objetos * tenemos que recorrer cada objeto y almacenarlos en nuestra lista */ return this.lugaresColeccion.valueChanges().pipe( map( (alllugares: any[]) => { // inicialiamos el array this.lugares = []; /** recorremos cada uno de los lugares 'alllugares' y * cada lugar lo almacenamos en el array 'lugares' */ alllugares.forEach( lugar => { this.lugares.unshift( lugar ); }); })); } getLugar( id ) { this.lugarDocument = this.lugaresColeccion.doc( id ); return this.lugarDocument.get(); } addLugar( lugar: Lugar ) { const mensajeS = 'Lugar Agregado exitosamente!'; const mensajeE = 'No se pudo agregar el lugar'; this.lugarDocument = this.lugaresColeccion.doc( lugar.uid ); if ( lugar.uid ) { // this.lugarDocument.update( lugar ); return this.lugarDocument.set( lugar ) .then( () => { this.presentToast( mensajeS ); }).catch( (error) => { this.presentToast( mensajeE ); console.error('Error al agregar el lugar: ', error); }); } else { return console.error('Error, No hay un id para crear el documento.'); } } updateLugar( lugar: Lugar ) { const mensajeS = 'Lugar Actualizado exitosamente!'; const mensajeE = 'No se pudo Actualizar el lugar'; this.lugarDocument = this.lugaresColeccion.doc( lugar.uid ); if ( lugar.uid ) { return this.lugarDocument.update( lugar ).then((result) => { this.presentToast( mensajeS ); }).catch((err) => { this.presentToast( mensajeE ); }); } else { console.error('Error, no existe el id del lugar.'); } } deleteLugar( id ) { this.lugarDocument = this.lugaresColeccion.doc( id ); return this.lugarDocument.delete(); } }
Agradezco si pueden ayudarme a mejorar con correcciones o recomendaciones. Gracias.
Que motor de base de datos usa firebase?
No sé, pero el profe mencionó que Firebase se parece a MongoDB por lo que usa nodos
Hola! algien me puede ayudar con este error...
Vuelve a subir la imagen porque no subió, solo debes arrastrarla y soltarla en el cuadro donde escribes la pregunta/comentario.
Yo tuve un problema de denegación de servicio y lo solucione con esto:
Hola, tengo este error, alguno lo ha podido solucionar?
Error: Can’t resolve all parameters for LugaresService: (?).
at syntaxError ()
at CompileMetadataResolver._getDependenciesMetadata ()
at CompileMetadataResolver._getTypeMetadata ()
at CompileMetadataResolver._getInjectableMetadata ()
at CompileMetadataResolver.getProviderMetadata ()
at
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata ()
at CompileMetadataResolver.getNgModuleMetadata ()
at JitCompiler._loadModules ()
Hola. pudiste solucionarlo?
Revisa si no pusiste el decorador @Injectable() en LugaresService
Me sale el siguiente error lo lee como indefinido cuando coloco el [(ngModule)
Te hace falta meter tus ngModel entre parentesis
<ion-list> <ion-item> <ion-label floating>Nombre</ion-label> <ion-input type="text" [(ngModel)]="lugar.nombre"></ion-input> </ion-item> <ion-item> <ion-label floating>Dirección</ion-label> <ion-input type="text" [(ngModel)]="lugar.direccion"></ion-input> </ion-item> <ion-item> <ion-label>Categoría</ion-label> <ion-select [(ngModel)]="lugar.categoria"> <ion-option value="AireLibre">Aire Libre</ion-option> <ion-option value="LugarCerrado">Lugar Cerrado</ion-option> </ion-select> </ion-item> <ion-item> <ion-label floating>Descripción</ion-label> <ion-textarea [(ngModel)]="lugar.descripcion"></ion-textarea> </ion-item> </ion-list>
porque debo meter el ngModule dentro de parentesis?
Tengo problemas en obtener LugaresServices con el import
){kind=small}
y este es mi codigo en lugar.ts
import { Component } from '@angular/core'; import { IonicPage, NavController, NavParams } from 'ionic-angular'; import { LugaresServices } from '../../services/lugaresservices'; @IonicPage() @Component({ selector: 'page-registerbaby', templateUrl: 'registerbaby.html', }) export class LugarPage { lugar: any = {}; constructor(public navCtrl: NavController, public navParams: NavParams, public lugaresService: LugaresServices) { this.lugar=navParams.get('lugar'); } guardarLugar(){ this.lugaresService.createLugar(this.lugar); console.log(this.lugar); } }
Es porque el LugaresService no está registrado en el app module. Eduardo lo explica durante ésta lección
