棱角分明的基地-设置联系表格

如何解决棱角分明的基地-设置联系表格

我对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: ['',message: ['',});
  }
  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,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

谢谢！

解决方法

您的代码中有

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

但是，您应该这样做

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

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