我正在尝试将ionic5 Form与Firebase一起使用。如下图所示,此表单包含一些输入文本,如会员名称、dob、电子邮件等。我生成了会员页面,以及m成员服务和用户界面以及已配置的环境。当我运行应用程序时,我得到了这个错误错误类型错误:this.memberListRef未定义。
请在下面找到代码脚本。
会员服务.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
})
}
.
.
.
.
}
这是我的添加成员.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));
}
}
}
非常感谢你的帮助。
此错误的修复方法是在推送之前定义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
})
}