angular - 错误类型错误：this.memberListRef 未定义

Question

我正在尝试将 ionic5 Form 与 Firebase 一起使用。如下图所示，此表单包含一些输入文本，如会员姓名、出生日期、电子邮件等。我生成的会员页面以及会员服务和会员界面以及已配置的环境。当我运行该应用程序时，我收到此错误ERROR TypeError: this.memberListRef is undefined。

请在下面找到代码脚本。

会员服务.ts

import { Injectable } from '@angular/core';
import { Member } from '../shared/member';
import { AngularFireDatabase, AngularFireList, AngularFireObject } from '@angular/fire/database';

@Injectable({
  providedIn: 'root'
})

export class MemberService {
  memberListRef: AngularFireList<any>;
  memberRef: AngularFireObject<any>;

  constructor(private db: AngularFireDatabase) { }

  // Create
  createMember(apt: Member) {
    return this.memberListRef.push({
      member_name: apt.member_name,
      member_dob: apt.member_dob,
      member_email: apt.member_email,
      member_club_id: apt.member_club_id,
      member_contact: apt.member_contact,
      member_address: apt.member_address

    })
  }
.
.
.
.

   }

这是我的add-member.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormGroup, FormBuilder } from "@angular/forms";
import { MemberService } from './../shared/member.service';
@Component({
  selector: 'app-add-member',
  templateUrl: './add-member.page.html',
  styleUrls: ['./add-member.page.scss'],
})
export class AddMemberPage implements OnInit {
  memberForm: FormGroup;

  constructor(
    private aptService: MemberService,
    private router: Router,
    public fb: FormBuilder
  ) { }

  ngOnInit() {
    this.memberForm = this.fb.group({
      member_name: [''],
      member_dob: [''],
      member_email: [''],
      member_club_id: [''],
      member_contact: [''],
      member_address: ['']
    })
  }
  formSubmit() {
    if (!this.memberForm.valid) {
      return false;
    } else {
      this.aptService.createMember(this.memberForm.value).then(res => {
        console.log(res)
        this.memberForm.reset();
        this.router.navigate(['/club']);
      })
        .catch(error => console.log(error));
    }
  }

}

感谢您的帮助。

标签： angularionic-frameworkionic5

Answer 1

此错误的修复方法是在推送之前定义 memberListRef

createMember(apt: Member) {
    this.memberListRef=this.db.list('member')
    return this.memberListRef.push({
      member_name: apt.member_name,
      member_dob: apt.member_dob,
      member_email: apt.member_email,
      member_club_id: apt.member_club_id,
      member_contact: apt.member_contact,
      member_address: apt.member_address
    })
  }