0

Estoy intentando hacer la operación update a los contactos de mi agenda, una aplicación con el Framework Ionic 3 y Firebase.

Desde el listado de contactos y tras pulsar en uno de ellos se accede a la edición, contact.html:

<ion-header>

  <ion-navbar color= "primary">
    <ion-title>Contactos</ion-title>
    <button ion-button menuToggle>
        <ion-icon name="menu"></ion-icon>
    </button>
    <ion-buttons end>
      <button ion-button icon-only (click)="onLoadNewContact()">
          <ion-icon name="add-circle"></ion-icon>
       </button>
  </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
       <button ion-item *ngFor="let contact of contactList$ | async"
       detail-push [navPush]="navEdit" [navParams]="{contact: contact}">
       {{contact.nombre}}
          <p><strong>Nombre: </strong>{{contact.nombre}}</p>
          <p><strong>Organización: </strong>{{contact.organization}}</p>
          <p><strong>Móvil: </strong>{{contact.movil}}</p>
          <p><strong>Correo: </strong>{{contact.correo}}</p>
       </button>
   </ion-list>
</ion-content>

contact.ts:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ActionSheetController } from 'ionic-angular';
import { NuevoContactoPage } from '../nuevo-contacto/nuevo-contacto';
import { ContactService} from '../../services/contact.service';
import { importType } from '@angular/compiler/src/output/output_ast';
import { Observable } from 'rxjs/Observable';
import { Contact } from '../../models/contact.model';
import { EditPage } from '../edit/edit';
//import { EditContactPage } from '../edit-contact/edit-contact';

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

@IonicPage()
@Component({
  selector: 'page-contacto',
  templateUrl: 'contacto.html',
})
export class ContactoPage {

  navEdit= EditPage;

  contactList$: Observable<Contact[]>

  constructor(public navCtrl: NavController, 
    public navParams: NavParams,
    private contactList: ContactService,
    public actionSheetCtrl: ActionSheetController,
    private contactService: ContactService
  ) {

    this.contactList$= this.contactList
    .getContactList()
    .snapshotChanges()
    .map(
      changes => {
        return changes.map(c => ({
          key: c.payload.key, 
          ...c.payload.val(),
          }));
        });

  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad ContactoPage');
  }

  onLoadNewContact() {
    this.navCtrl.push(NuevoContactoPage);
  }


}

Página de edición edit.html:

<ion-header>

  <ion-navbar>
    <ion-title>{{contact?.nombre}}</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
      <ion-item>
        <ion-label>Nombre</ion-label>
        <ion-input [(ngModel)]= "contact.nombre" type="text" placeholder="Nombre"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Organización</ion-label>
        <ion-input [(ngModel)]= "contact.organization" type="text" placeholder="Organización"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Móvil</ion-label>
        <ion-input [(ngModel)]= "contact.movil" type="text" placeholder="666666666"></ion-input>
      </ion-item>

      <ion-item>
        <ion-label>Correo</ion-label>
        <ion-input [(ngModel)]= "contact.correo" type="text" placeholder="[email protected]"></ion-input>
      </ion-item>
  </ion-list>

  

  <div align="center">
    <button ion-button large type= "submit" (click)="saveContact(contact)">Guardar</button>
    <!-- <button ion-button large type= "button" [disabled]= "!f.valid">Cancelar</button> -->
  </div>

</ion-content>

edit.ts:

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { Component, NgModule } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ContactoPage } from '../../pages/contacto/contacto';
import { Contact } from '../../models/contact.model';
import { ContactService } from '../../services/contact.service';
import { BrowserModule } from '@angular/platform-browser';
/**
 * Generated class for the EditPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */
@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule
           ]
})

@IonicPage()
@Component({
  selector: 'page-edit',
  templateUrl: 'edit.html',
})
export class EditPage {

  contact: Contact = {
    nombre: this.navParams.get('contact').nombre,
    organization: this.navParams.get('contact').organization,
    movil: this.navParams.get('contact').movil,
    correo: this.navParams.get('contact').correo,
  }

  constructor(private navCtrl: NavController, private navParams: NavParams, private contactService: ContactService) {
  }

  ionViewWillLoad() {
    console.log(this.navParams.get('contact'));
  }

   saveContact(contact: Contact){
     this.contactService.editContact(contact).then (() => {
       this.navCtrl.setRoot(ContactoPage);
     });
  }
}

El servicio que realiza la actualización, contact.service.ts:

import {Contact} from "../models/contact.model"
import { Injectable } from "@angular/core";
import { AngularFireDatabase } from "angularfire2/database";

@Injectable()
export class ContactService{

    private contactListRef = this.db.list<Contact>('contactList');


    constructor(private db: AngularFireDatabase){
    }

    getContactList(){
        return this.contactListRef;
    }

    addContact (contact: Contact){
        return this.contactListRef.push(contact);
    }

    editContact (contact: Contact){
        return this.contactListRef.update(contact.key, contact);
    }
}

No entiendo por qué, tras modificar el contacto en el formulario y pulsar el botón "Guardar", recibo este error:

Error
Close
Runtime Error
Cannot read property 'set' of undefined
Stack
TypeError: Cannot read property 'set' of undefined
    at isFirebaseRef (http://localhost:8100/build/vendor.js:46666:25)
    at checkOperationCases (http://localhost:8100/build/vendor.js:46676:14)
    at Object.dataOperation [as update] (http://localhost:8100/build/vendor.js:132336:91)
    at ContactService.webpackJsonp.65.ContactService.editContact (http://localhost:8100/build/main.js:976:36)
    at EditPage.webpackJsonp.138.EditPage.saveContact (http://localhost:8100/build/main.js:195:29)
    at Object.eval [as handleEvent] (ng:///AppModule/EditPage.ngfactory.js:162:31)
    at handleEvent (http://localhost:8100/build/vendor.js:13921:155)
    at callWithDebugContext (http://localhost:8100/build/vendor.js:15430:42)
    at Object.debugHandleEvent [as handleEvent] (http://localhost:8100/build/vendor.js:15017:12)
    at dispatchEvent (http://localhost:8100/build/vendor.js:10336:25)
Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.2.9
Angular Compiler CLI: 5.2.9
Node: 9.8.0
OS Platform: Windows 10
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.181 Safari/537.36

Agradecería cualquier ayuda, muchas gracias.

2
  • Oye amigo pudiste encontrar el error ? en estos momentos me esta pasando igual. por favor colaborame
    – Michel
    el 28 feb. 2019 a las 0:55
  • Ya probaste, con compilar nuevamente el proyecto?
    – Lud Osorio
    el 28 feb. 2019 a las 4:20

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.