Crear lista dinámica y agregar la habilidad de editar records

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

Onasis Gonzalo Soto Castro

student•

Error:
Object(…) not a function

Solución:
npm install rxjs@6 rxjs-compat@6 --save

Fuentes:
https://github.com/angular/angularfire2/issues/166
https://es.stackoverflow.com/questions/165047/error-typeerror-object-is-not-a-function-using-angularfirestore-and-fireba

Yohan Estiven Arias Vasquez

student•

Excelente tu aporte friend.!

Onasis Gonzalo Soto Castro

student•

@jsarias1993 de nada espero y les sirva a los demás colegas… 😄
Por lo que entendí es un problema de versión

Yohan Estiven Arias Vasquez

student•

Para los que tengan el error VM3871 polyfills.js:3 Uncaught TypeError: Object(…) is not a function la solución más práctica es actualizar el rxjs a la versión 6 ya que ionic trabaja por defecto con la 5.

Solución:
npm install rxjs@6 rxjs-compat@6 --save

Miguel Angel Ramos Rodríguez

student•

Vale 😃 gracias por el aporte

Adrian Ordoñez Lopez

student•

Para el error que comentan en la nueva version de ionic yo lo resolvi de la siguiente manera

npm install --save-exact rxjs@6.3.3 npm install --save-exact rxjs-compat@6.3.3

Navel Peña

student•

buen aporte me funciono.

instale sin la version exacta y me dio otro error, tuve que desinstalar pero finalmente instale esta version super bien.

alguien puede explicar porque pasan estas cosas, o donde leemos para que aprendamos a solucionar estos tipos de problemas

gracias

Leonardo Daniel Benitez Cuenca

student•

Referente al error de mavi "TypeScriptError"

Paso 1 : ve package.jsony modifica "rxjs": "^6.5.3"a**"rxjs": "6.5.3"** también el "rxjs-compat": "6.5.3" de esta manera

Paso 2: ejecuta >npm update

Francisco Manuel Velásquez Escobar

student•

Para el envío de formularios es conveniente utilizar toast como mensajes de confirmación, acá la documentación:

https://ionicframework.com/docs/components/#toast

Y acá un ejemplo de como hacerlo:

https://github.com/ionic-team/ionic-preview-app/tree/master/src/pages/toast/basic

juan david jaramillo zuñiga

student•

porfavor monten el verdadero codigo, que esta haciendo eduardo, no esta completo

Juan Guillermo Perez Cardozo

student•

Esta documentacion les puede ayudar. https://es.stackoverflow.com/questions/165047/error-typeerror-object-is-not-a-function-using-angularfirestore-and-fireba

José Ramón Castillo Silva

student•

Hola, espero que alguien pueda ayudarme. Me sale el siguiente error cuando uso subscribe

Uncaught TypeError: Object(...) is not a function at SwitchMapSubscriber.project (changes.js:7) at SwitchMapSubscriber._next (switchMap.js:90) at SwitchMapSubscriber.Subscriber.next (Subscriber.js:93) at RefCountSubscriber.Subscriber._next (Subscriber.js:129) at RefCountSubscriber.Subscriber.next (Subscriber.js:93) at Subject.next (Subject.js:55) at ConnectableSubscriber.Subscriber._next (Subscriber.js:129) at ConnectableSubscriber.Subscriber.next (Subscriber.js:93) at Notification.observe (Notification.js:32) at AsyncAction.DelaySubscriber.dispatch (delay.js:88)

Navel Peña

student•

Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

Tengo este problema cuando carga una imagen y hago scroll, porque?, alguien se le ocurre. La verdad copie el codigo para cargar la imagen no lo entiendo.

PROFEE AYUDAAA!! Gracias

Navel Peña

student•

Cancelo y sigue normal, pero sale ese error. Me pueden ayudar

Kevin Lozoya Giner

student•

Otra forma de asignar el contenido de la llamada a la propiedad ‘lugares’

HTML

<ion-item-sliding *ngFor="let lugar of lugares | async">
  <ion-item (click)="irAVistaDeDetalleExistente(lugar)">
    <h2>{{lugar.nombre}}</h2>
    <h3>{{lugar.direccion}}</h3>
    <p>{{lugar.categoria}}</p>
  </ion-item>

  <ion-item-options side="right">
    <button ion-button color="danger" (click)="deleteLugar(lugar)">
      <ion-icon name="trash"></ion-icon>
      Borrar
    </button>
  </ion-item-options>
</ion-item-sliding>

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html',
})
export class HomePage {
  lugares: Observable<{}[]>;

  constructor(private navCtrl: NavController, private lugaresProvider: LugaresProvider, private alertCtrl: AlertController) {
    this.lugares = this.lugaresProvider.getLugares().valueChanges();
  }
}

Gabriel Pérez Moreno

student•

Me sale el siguiente error en la consola de chrome cuando intenta recorrer la lista del nodo de firebase

VM3871 polyfills.js:3 Uncaught TypeError: Object(…) is not a function
at SwitchMapSubscriber.project (VM2971 vendor.js:74362)
at SwitchMapSubscriber._next (VM2971 vendor.js:62228)
at SwitchMapSubscriber.Subscriber.next (VM2971 vendor.js:20750)
at RefCountSubscriber.Subscriber._next (VM2971 vendor.js:20786)
at RefCountSubscriber.Subscriber.next (VM2971 vendor.js:20750)
at Subject.next (VM2971 vendor.js:23237)
at ConnectableSubscriber.Subscriber._next (VM2971 vendor.js:20786)
at ConnectableSubscriber.Subscriber.next (VM2971 vendor.js:20750)
at Notification.observe (VM2971 vendor.js:52579)
at AsyncAction.DelaySubscriber.dispatch (VM2971 vendor.js:76673)

quien me puede ayudar?

Ytzvan Mastino

student•

Intenta con esto:

npm uninstall angularfire2
npm install angularfire2@5.0.0-rc.3 --save
npm uninstall firebase
npm install firebase@4.8.0 --save```

Gregorio Garcia

student•

@ytzvan Esa fue la solución ¡gracias!

Nathaly Stefani Riaño Bejarano

student•

Para traer los lugares desde Firebase (Lista dinámica):
export class HomePage { lugares: any = []; constructor(public navCtrl: NavController, public lugaresService: LugaresService) { this.lugaresService.getLugares().valueChanges() .subscribe((lugaresFB) => { this.lugares = lugaresFB; }) }

Para editar el lugar (no crear un registro nuevo) y devolverse a Home al oprimir el botón:
guardarLugar() { if(!this.lugar.id) { this.lugar.id = Date.now(); } this.lugaresService.createLugar(this.lugar); this.navCtrl.pop(); alert('Lugar guardado con éxito') console.log(this.lugar); }

Oscar Samuel Pérez Pérez

student•

Tengo este problema, que puede ser
https://ibb.co/SQNdkp0

Oscar Samuel Pérez Pérez

student•

Tengo este error que puede ser
https://ibb.co/SQNdkp0

Helder Yesid Castrillon Cobo

student•

Despues de instalar npm install rxjs@6 rxjs-compat@6 --save.
Ahora me sale este un error en tiempo de ejecución

bindCallback.js:4 Uncaught TypeError: Cannot set property ‘bindCallback’ of undefined
at Object.<anonymous> (bindCallback.js:4)
at webpack_require (bootstrap 713ddade857dfc0585de:54)
at Object.<anonymous> (Rx.js:17)
at webpack_require (bootstrap 713ddade857dfc0585de:54)
at Object.<anonymous> (Rx.js:6)
at webpack_require (bootstrap 713ddade857dfc0585de:54)
at Object.<anonymous> (merge.js:3)
at webpack_require (bootstrap 713ddade857dfc0585de:54)
at Object.<anonymous> (merge.js:6)
at webpack_require (bootstrap 713ddade857dfc0585de:54)
Instale y desinstale como veo en algunas lineas del foro pero no tengo solución. algún aporte?

Wilson Javier Rueda Triana

student•

Uncaught TypeError: Cannot set property ‘bindCallback’ of undefined
at Object.<anonymous> (bindCallback.js:4)
at webpack_require (bootstrap 70bc3984e8e091919c0a:54)
at Object.<anonymous> (Rx.js:17)
at webpack_require (bootstrap 70bc3984e8e091919c0a:54)
at Object.<anonymous> (Rx.js:6)
at webpack_require (bootstrap 70bc3984e8e091919c0a:54)
at Object.<anonymous> (merge.js:3)
at webpack_require (bootstrap 70bc3984e8e091919c0a:54)
at Object.<anonymous> (merge.js:6)
at webpack_require (bootstrap 70bc3984e8e091919c0a:54)

que puede ser ???

Carlos Uriel de Jesus Sánchez González

student•

actualizar el rxjs a version 6

Wilbertson Mojica Cifuentes

student•

Me sale el siguiente error: Cannot read property ‘nombre’ of undefined
Una ayuda por favor! Gracias

Diego Forero

Team Platzi•

Comparte tu código y una captura de pantalla del error, así es difícil saber la causa del error puede ser un error de digitación y por eso el objeto esta llegando como undefined y estas tratando de acceder a un atributo nombre por esto sale el error.

Mateo Loaiza Rios

student•

Me pasa el mismo erro cada que hago una actualización de un valor en firebase

Rolly Chin

student•

Hola, quien puede ayudarme?
tengo el siguiente error y no encuentro el motivo.

Uncaught TypeError: Object(...) is not a function
    at SwitchMapSubscriber.project (changes.js:7)
    at SwitchMapSubscriber._next (switchMap.js:90)
    at SwitchMapSubscriber.Subscriber.next (Subscriber.js:93)
    at RefCountSubscriber.Subscriber._next (Subscriber.js:129)
    at RefCountSubscriber.Subscriber.next (Subscriber.js:93)
    at Subject.next (Subject.js:55)
    at ConnectableSubscriber.Subscriber._next (Subscriber.js:129)
    at ConnectableSubscriber.Subscriber.next (Subscriber.js:93)
    at Notification.observe (Notification.js:32)
    at AsyncAction.DelaySubscriber.dispatch (delay.js:88)

mi codigo es

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { LugarPage } from '../lugar/lugar';
import { LugaresService } from '../../services/lugares.service';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  lugares: any =[]

  /*[
    {nombre:'lugar1',direccion:'direccion 1',categoria:'aire_libre',descripcion:'descripcion 1'},
    {nombre:'lugar2',direccion:'direccion 2',categoria:'lugar_cerrado',descripcion:'descripcion 2'},
    {nombre:'lugar3',direccion:'direccion 3',categoria:'aire_libre',descripcion:'descripcion 3'},
    {nombre:'lugar4',direccion:'direccion 4',categoria:'lugar_cerrado',descripcion:'descripcion 4'},
    {nombre:'lugar5',direccion:'direccion 5',categoria:'aire_libre',descripcion:'descripcion 5'}
  ];*/
  constructor(public navCtrl: NavController,public lugaresSrv:LugaresService) {
    this.lugaresSrv.getLugares().valueChanges().subscribe( (FB) => {
      this.lugares=FB
    })
  }```

Diego Forero

Team Platzi•

En este archivo no esta el error , puede estar en lugares.service

Cristhian Tarazona

student•

Cristhian Tarazona

student•

salen ese error cuando en el constructor agrego la line de código

 this.lugar = navParams.get('lugar');

Diego Forero

Team Platzi•

Estas seguro que esta llegando el parámetro lugar?, si no esta llegando es la razón por la que se rompe la aplicación.