角度和火力 - 建立联系表格

Question

我对 angular 和 firebase 比较陌生，我正在尝试在我的投资组合网站中设置一个联系表。不知道如何准确地实现这一点。到目前为止，我一直在阅读旧指南：

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, NO_ERRORS_SCHEMA} from '@angular/core';
import { RouterModule } from '@angular/router';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { ProjectsComponent } from './projects/projects.component';
import { BlogsComponent } from './blogs/blogs.component';
import { ContactComponent } from './contact/contact.component';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
import { ResumeComponent } from './resume/resume.component';
import { AngularFireModule } from '@angular/fire';
import { AngularFireDatabaseModule } from '@angular/fire/database';
import { environment } from '../environments/environment';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    ProjectsComponent,
    BlogsComponent,
    ContactComponent,
    ResumeComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule,
    RouterModule,
    AngularFireModule.initializeApp(environment.firebaseConfig),
    AngularFireDatabaseModule 
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [NO_ERRORS_SCHEMA]
})
export class AppModule { }

contact.component.ts

import { Component } from '@angular/core';
import  { FormGroup, FormBuilder, Validators } from  '@angular/forms'; 
import { AngularFirestore } from '@angular/fire/firestore';



@Component({
  selector: 'app-contact',
  templateUrl: './contact.component.html',
  styleUrls: ['./contact.component.css']
})
export class ContactComponent {

  form: FormGroup;
  constructor(private fb: FormBuilder, private af: AngularFirestore) {
    this.createForm();
  }
  createForm() {
    this.form = this.fb.group({
      name: ['', Validators.required],
      email: ['', Validators.required],
      message: ['', Validators.required],
    });
  }
  onSubmit() {
    const {name, email, message} = this.form.value;
    const date = Date();
    const html = `
      <div>From: ${name}</div>
      <div>Email: <a href="mailto:${email}">${email}</a></div>
      <div>Date: ${date}</div>
      <div>Message: ${message}</div>
    `;
    let formRequest = { name, email, message, date, html };
    this.af.list('/messages').set(formRequest);
    this.form.reset();
  }
}

我一直在这里遇到错误，

Property 'list' does not exist on type 'AngularFirestore'.

我不知道如何解决这个问题。 我也对如何设置 firebase 数据库感到困惑。我是否需要添加集合，例如姓名、电子邮件等？一些起点会有所帮助——这是我用作参考的链接：https://medium.com/@markgoho/create-a-contact-form-in-angular-using-cloud-functions-for-firebase-5e390bdf5600

谢谢！

Answer 1

在你的代码中

this.af.list('/messages').set(formRequest);

但是，你应该这样做

this.af.database.list('/messages').set(formRequest);

根据documentation，这是存在的方法。