Agregar la habilidad de ver records

Clase 28 de 36 • Curso Básico de Ionic 2018

yhoiner Morales Rios

student•

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
![](

n el Home.ts
![](

En el lugar.ts
![](

MEGATRIX LABS

student•

@Yhoiner91 Hola! me podrían ayudar con este error...

Juan Guillermo Perez Cardozo

student•

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

Edgar Santiago

student•

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>

Ezequiel Portela

student•

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

Edgar Santiago

student•

Oh!! Excelente, muchas gracias Ezequiel!

Albert Jiménez

student•

Muy bien explicado 😃 Excelente

Claudio Ariel Sosa

student•

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] (http://localhost:8100/build/vendor.js:15382:21)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14529:14)
at callViewAction (http://localhost:8100/build/vendor.js:14880:21)
at execComponentViewsAction (http://localhost:8100/build/vendor.js:14812:13)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14535:5)
at callViewAction (http://localhost:8100/build/vendor.js:14880:21)
at execEmbeddedViewsAction (http://localhost:8100/build/vendor.js:14838:17)
at checkAndUpdateView (http://localhost:8100/build/vendor.js:14530:5)
at callViewAction (http://localhost:8100/build/vendor.js:14880:21)

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>

Gabriel Pérez Moreno

student•

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

}

juan david jaramillo zuñiga

student•

tengo el mismo error y no he podido resolverlo

Guillermo Alfonso Silva Hernandez

student•

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

Edward Steven Ramos Palacios

teacher•

@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>```

Santiago Yunda Rivera

student•

por alguna razón no me cargan las imagenes. les dejo el enlace donde tengo las imagenes en mega. agradezco sus opiniones

https://mega.nz/#F!0M1wWCBS!MDv3ip7hyILmx0I5k60ItQ

Carlos Uriel de Jesus Sánchez González

student•

hay que tomar el curso de angular primero

Yolher Camilo Albeiro Hernandez Reyes

student•

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)

César Rodolfo Vicuña Méndez

student•

me aparece este error, me percaté que el error desaparace cuando no declaro en el constructor de lugar.ts el servicio lugaresService

Santiago Yunda Rivera

student•

Les comparto como lo he estado haciendo.
Estoy usando

Ionic 4
Cloud firestore (la base de datos por documentos de firebase)
Angular 6

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.

Gabriel Antonio Bermúdez Arana

student•

Que motor de base de datos usa firebase?

Gabriel Solorzano

student•

No sé, pero el profe mencionó que Firebase se parece a MongoDB por lo que usa nodos

MEGATRIX LABS

student•

Hola! algien me puede ayudar con este error...

Diego Forero

Team Platzi•

Vuelve a subir la imagen porque no subió, solo debes arrastrarla y soltarla en el cuadro donde escribes la pregunta/comentario.

Leonardo Daniel Benitez Cuenca

student•

Yo tuve un problema de denegación de servicio y lo solucione con esto:

Gustavo Alfredo Palomino Castellanos

student•

Hola, tengo este error, alguno lo ha podido solucionar?
Error: Can’t resolve all parameters for LugaresService: (?).
at syntaxError (http://localhost:8100/build/vendor.js:94209:34)
at CompileMetadataResolver._getDependenciesMetadata (http://localhost:8100/build/vendor.js:109429:35)
at CompileMetadataResolver._getTypeMetadata (http://localhost:8100/build/vendor.js:109264:26)
at CompileMetadataResolver._getInjectableMetadata (http://localhost:8100/build/vendor.js:109244:21)
at CompileMetadataResolver.getProviderMetadata (http://localhost:8100/build/vendor.js:109604:40)
at http://localhost:8100/build/vendor.js:109515:49
at Array.forEach (<anonymous>)
at CompileMetadataResolver._getProvidersMetadata (http://localhost:8100/build/vendor.js:109475:19)
at CompileMetadataResolver.getNgModuleMetadata (http://localhost:8100/build/vendor.js:109043:50)
at JitCompiler._loadModules (http://localhost:8100/build/vendor.js:128136:87)

Yolher Camilo Albeiro Hernandez Reyes

student•

Hola. pudiste solucionarlo?

Jhoseph Stanly Arango Garcia

student•

Revisa si no pusiste el decorador @Injectable() en LugaresService

Cristhian Tarazona

student•

Me sale el siguiente error lo lee como indefinido cuando coloco el [(ngModule)

]

Marco Antonio Orta Bustamante

student•

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>

Ana Maria Cubides Acosta

student•

porque debo meter el ngModule dentro de parentesis?

Fabiola Dayana Acarapi Alvarez

student•

Tengo problemas en obtener LugaresServices con el import

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


}

Fabiola Dayana Acarapi Alvarez

student•

Fernando Ontiveros

student•

Es porque el LugaresService no está registrado en el app module. Eduardo lo explica durante ésta lección