Estoy siguiendo https://www.positronx.io/ionic-firebase-list-tutorial/ que crea una aplicación de lista CRUD que escribe y lee desde Firebase. Estoy usando un marco Ionic con Angular. Cuando intento escribir datos en firebase, este es el error de la consola que recibo:
ERROR TypeError: Cannot read properties of undefined (reading 'push') at UserService.createUser (user.service.ts:17:26) at MakePage.onFormSubmit (make.page.ts:33:23) at MakePage_Template_form_ngSubmit_6_listener (template.html:9:30) at executeListenerWithErrorHandling (core.mjs:14963:16) at Object.wrapListenerIn_markDirtyAndPreventDefault [as next] (core.mjs:15001:22) at SafeSubscriber.__tryOrUnsub (Subscriber.js:183:1) at SafeSubscriber.next (Subscriber.js:122:1) at Subscriber._next (Subscriber.js:72:1) at Subscriber.next (Subscriber.js:49:1) at EventEmitter_.next (Subject.js:39:1)Aquí está el código en user.service.ts:
import { Injectable } from '@angular/core'; import { User } from './users'; import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/compat/database'; @Injectable({ providedIn: 'root' }) export class UserService { userList: AngularFireList<any>; userRef: AngularFireObject<any>; constructor(private db: AngularFireDatabase) { } // Create createUser(user: User) { return this.userList.push({ name: user.name, email: user.email, mobile: user.mobile, }) }y aquí está make.page.ts:
import { Component, OnInit } from '@angular/core'; import { Router } from '@angular/router'; import { FormGroup, FormBuilder } from "@angular/forms"; import { UserService } from '../shared/user.service'; @Component({ selector: 'app-make', templateUrl: './make.page.html', styleUrls: ['./make.page.scss'], }) export class MakePage implements OnInit { form: FormGroup; constructor( private apiService: UserService, private router: Router, public fb: FormBuilder ) { } ngOnInit() { this.form = this.fb.group({ name: [''], email: [''], mobile: [''] }) } onFormSubmit() { if (!this.form.valid) { return false; } else { this.apiService.createUser(this.form.value).then(res => { this.form.reset(); this.router.navigate(['/home']); }) .catch(error => console.log(error)); } } }Parece que aún no ha definido la propiedad userList en la clase UserService . El tutorial al que se vinculó lo hace usando el método getUserList , que se llama en la función init de HomePage .
El tutorial probablemente presenta el código de una manera que es más fácil de explicar, pero no siempre mantiene el código funcionando, así que simplemente siga el tutorial y debería hacer que su programa funcione al final.
En el tutorial que usaron (y lo llamaron en la página de inicio, que está antes de la página de creación):
getUserList() { this.userList = this.db.list('/user'); return this.userList; }Que inicializa la lista de usuarios ANTES de llamar a createUser
createUser(user: User) { return this.userList.push({ name: user.name, email: user.email, mobile: user.mobile }) }Que pareces usar directamente
Solución: cree la lista de usuarios en el constructor de la siguiente manera:
constructor(private db: AngularFireDatabase) { this.userList = this.db.list('/user'); }Salud