错误类型错误：无法读取未定义的属性（读取“推送”）答案

【问题标题】：ERROR TypeError: Cannot read properties of undefined (reading 'push')错误类型错误：无法读取未定义的属性（读取“推送”）
【发布时间】：2022-02-03 20:44:44
【问题描述】：

我正在关注https://www.positronx.io/ionic-firebase-list-tutorial/，它创建了一个从 Firebase 写入和读取的 CRUD 列表应用程序。我正在使用带有 Angular 的 Ionic 框架。当我尝试将数据写入 firebase 时，这是我得到的控制台错误：

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)

这是 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,
    })
  }

这里是 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));
    }
  }
}

【问题讨论】：

标签： javascript firebase-realtime-database angular7 angularfire ionic5

【解决方案1】：

您似乎尚未在类UserService 中定义属性userList。您链接到的教程是使用 getUserList 方法完成的，该方法在 HomePage 的 init 函数中被调用。

本教程可能会以一种更易于解释的方式呈现代码，但并不总是让代码正常工作，因此请进一步按照教程进行操作，最终您的程序应该可以正常工作。

【讨论】：

【解决方案2】：

在他们使用的教程中（他们在主页中调用它，在创建页面之前）：

 getUserList() {
    this.userList = this.db.list('/user');
    return this.userList;
  }

在调用 createUser 之前初始化 userList

  createUser(user: User) {
    return this.userList.push({
      name: user.name,
      email: user.email,
      mobile: user.mobile
    })
  }

你好像直接用的

解决方案：在构造函数中创建用户列表如下：

  constructor(private db: AngularFireDatabase) { 
    this.userList = this.db.list('/user');
  }

干杯

【讨论】：