为什么我的Angular项目不在firestore中写入数据？

我正在为我的技术学位开发一个angular项目，我尝试根据本文编写DB过程：

首先，在teacher.component.html中，我在我的输入中添加了@angular/forms中的formsGroup，就像本文一样，但我将这些值添加到我的项目中，如下代码所示：

<form [formGroup]="this.form">
      <div class="right">
      <div>
      <input mat-input type="text" name="username" placeholder="Username" formControlName="Username" autocomplete="off">
      </div>
      <div>
      <input mat-input type="email" name="email" placeholder="email" formControlName="email" autocomplete="on">
      </div>
      <div>
        <input mat-input type="tel" name="wpp" placeholder="wpp" formControlName="wpp" autocomplete="on">
      </div>
      <div>
        <textarea name="bio" id="bio" placeholder="Write your bio" formControlName="bio" required></textarea>
      </div>
      <div>
        <input mat-input type="number" min="1" step="any"name="perhour" placeholder="perhour" formControlName="perhour" autocomplete="on">
      </div>
      <div class="buttons">
        <button mat-button (click)="onSubmit()">Submit</button>
      </div>
    </div>
    </form>

我还创建了方法

onSubmit（）

，将数据发送到firestore数据库：

onSubmit() {
    this.firestore.collection('Teacher').add({
      field: this.form
        //field: this.form.value.new,
    })
    .then(res => {
        console.log(res);
        this.form.reset();
    })
    .catch(e => {
        console.log(e);
    })
}

最后，在方法

onInit（）

中，我插入了以下函数：

ngOnInit(): void {
    this.firestore.collection('Teacher').add({field:this.form})
    
  }

正如标题所说，我试图通过firebase表格中的表格插入数据，但没有写任何东西，如果有人能帮助我，提出建设性的批评和良好的说明，我非常感谢

---

抱歉，如果我写得不好，这是我第一次在这里写文章。

删除

ngOnInit

中的方法调用，因为它总是会添加一个空表单

this.firestore.collection('Teacher').add({field:this.form}).

<> >只留下代码<代码>提交（）/代码>我认为可以完成这项工作。

< P>我的回答是考虑使用FiSt店，而不是FialBasic，它是不同的产品。tou发布的链接有点奇怪，它在照片上有Firebase，但似乎在使用firestore

这可能不是你的问题，但这句话不正确：

<form [formGroup]="this.form">

这样，您将拥有一个属性与表单名称相同的文档。然后，当您需要编辑它时，您可以对表单执行修补程序值，即：

this.firestore.collection('Teacher').doc(id).valueChanges.pipe( 
  map(values => {
    this.form.patchValue(values)
  })
)

---

为什么要在

ngOnInit

中向firestore添加数据？它是一个生命周期方法，将在Angular初始化指令的所有数据绑定属性后调用。在

onSubmit

do

console.log（this.form）

中，我已经删除了html中的this，还编辑了onSubmit，这个bug出现了：找不到名称“form”。你是说实例成员“this.form”吗？ts（2663）找不到名称“docRef”。ts（2304）我不知道我是做错了还是做了什么。@RicardoBorges对不起，我编辑了代码，正确的是

this.form.value

和

res.id

，而不是

docRef.id

。

<form [formGroup]="form">

onSubmit() {
    this.firestore.collection('Teacher').add({...this.form.value})
    .then(res => { // res here, is the document reference;
        this.firestore.collection('Teacher').doc(res.id).update({id: res.id}); // Do this to keep the id in the document, it´s usefull to further edition. 
        console.log(res);
        this.form.reset();
    })
    .catch(e => {
        console.log(e);
    })
}

this.firestore.collection('Teacher').doc(id).valueChanges.pipe( 
  map(values => {
    this.form.patchValue(values)
  })
)