Javascript 角5反应形式不'；无法在Firebase上创建ID级别

我有一个模板驱动的表单（使用ngModel），我正在尝试将其更改为反应式表单。此表单将数据提交到Firebase数据库

在（模板驱动）之前，将数据正确插入Firebase，为每个发送的对象创建一个ID，如下所示：

但是，当我更改为被动形式时，有时插入的数据没有任何ID，如下所示：

我无法找出发生这种情况时的模式，也没有在代码中找到任何可以证明这种行为的错误

service.component.html

 <form [formGroup]="f" (ngSubmit)="submit()">
    <input type="hidden" id="$key" formControlName="$key">
    <div class="form-group">
      <label for="nome">Name</label>
      <input type="text" class="form-control" id="nome" formControlName="nome">
    </div>
    <div class="row col-md-12">
      <div class="col-md-6">
        <div class="form-group">
          <label for="preco">Price</label>
          <input type="text" class="form-control" id="preco" formControlName="preco">
        </div>
      </div>

      <div class="col-md-6">
        <div class="form-group">
          <label for="tempo">Time</label>
          <input type="time" class="form-control" id="tempo" formControlName="tempo">
        </div>
      </div>
    </div>
    <br/>
    <button class="btn btn-success" type="submit" [disabled]="f?.invalid">Save</button>
  </form>

名称
价格
时间


拯救

service.component.ts

import { Component, OnInit } from '@angular/core';
import { AbstractControl, FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms'
import { AngularFireAuth } from 'angularfire2/auth';
import { AngularFireDatabase, FirebaseListObservable, FirebaseObjectObservable} from 'angularfire2/database';
import { Servico } from './servico';

export class ServiceComponent implements OnInit {

  f: FormGroup;

  userId: string;
  $key: string;
  value: any;
  servicos: FirebaseListObservable<Servico[]>;
  servico: FirebaseObjectObservable<Servico>;  

  constructor(private db: AngularFireDatabase, 
              private afAuth: AngularFireAuth,
              private fb: FormBuilder) { 

    this.afAuth.authState.subscribe(user => {
      if(user) this.userId = user.uid
        this.servicos = db.list(`servicos/${this.userId}`);
    })

  }

  ngOnInit() {
    this.f = this.fb.group({
      $key: new FormControl(''),
      nome: this.fb.control('', Validators.required),
      preco: this.fb.control(''),
      tempo: this.fb.control('')
    })
  }

  submit() {       
    if (this.f.controls.$key.value == null)
      {
        this.db.list(`servicos/${this.userId}/`).push({
          nome: this.f.controls.nome.value,
          preco: this.f.controls.preco.value,
          tempo: this.f.controls.tempo.value
        }).then(() => {
            this.f.controls.nome.setValue('');
            this.f.controls.preco.setValue('');
            this.f.controls.tempo.setValue('');
            this.f.controls.$key.setValue(null);
          });
        }else{
          this.db.object(`servicos/${this.userId}/` + this.f.controls.$key.value).update({
            nome: this.f.controls.nome.value,
            preco: this.f.controls.preco.value,
            tempo: this.f.controls.tempo.value
          }).then(() => {
            this.f.controls.nome.setValue('');
            this.f.controls.preco.setValue('');
            this.f.controls.tempo.setValue('');
            this.f.controls.$key.setValue(null);
          }));
        }
  }

}

从'@angular/core'导入{Component，OnInit}；
从'@angular/forms'导入{AbstractControl，FormBuilder，FormControl，FormGroup，Validators}
从'angularfire2/auth'导入{AngularFireAuth}；
从“angularfire2/database”导入{AngularFireDatabase，FirebaseListObservable，FirebaseObjectObservable}；
从“/Servico”导入{Servico}；
导出类ServiceComponent实现OnInit{
f：表格组；
userId:string；
$key:string；
价值：任何；
servicos:FirebaseListObservable；
servico:FirebaseObjectObservable；
构造函数（专用数据库：AngularFireDatabase，
私人afAuth:AngularFireAuth，
私人fb:FormBuilder）{
this.afAuth.authState.subscribe（用户=>{
如果（用户）this.userId=user.uid
this.servicos=db.list（`servicos/${this.userId}`）；
})
}
恩戈尼尼特（）{
this.f=this.fb.group({
$key:newformcontrol（“”），
nome：此fb控制（''，需要验证程序），
preco：此.fb.控件（“”），
节奏：这个。fb。控制（“”）
})
}
提交（）{
if（this.f.controls.$key.value==null）
{
this.db.list（`servicos/${this.userId}/`）.push({
nome:this.f.controls.nome.value，
preco:this.f.controls.preco.value，
节奏：此.f.控制.tempo.值
}).然后（（）=>{
此.f.控制.nome.setValue（''）；
此.f.控制.preco.setValue（“”）；
此.f.控制.tempo.setValue（“”）；
此.f.控制.$key.setValue（null）；
});
}否则{
this.db.object（`servicos/${this.userId}/`+this.f.controls.$key.value）。更新({
nome:this.f.controls.nome.value，
preco:this.f.controls.preco.value，
节奏：此.f.控制.tempo.值
}).然后（（）=>{
此.f.控制.nome.setValue（''）；
此.f.控制.preco.setValue（“”）；
此.f.控制.tempo.setValue（“”）；
此.f.控制.$key.setValue（null）；
}));
}
}
}

我认为您的变量

this.f.controls.$key.value

被错误地设置为空字符串，这就是导致数据出现在错误位置的原因。由于空字符串不是

null

，因此您的

if（this.f.controls.$key.value==null）

将为false，而

else

将触发

} else {
                                         // This is an empty string
                                                         \/  
                                                         \/  
    this.db.object(`servicos/${this.userId}/` + this.f.controls.$key.value).update({
      ...values...
    }).then(() => {
      ...etc...
    }));
  }

这意味着您的

update

呼叫实际上只针对：

this.db.object(`servicos/${this.userId}/

---

要确认这是问题所在，请尝试在更新调用中硬编码一个值，而不是

this.f.controls.$key.value

，我怀疑这种奇怪的行为会消失。您需要找到另一种方法来获取正确的密钥/路径。

谢谢您的回答，似乎您对它有时不起作用的原因是正确的。我发现问题总是发生在第一次显示页面时。可能问题出现在

submit（）

函数之前？肯定是在

submit（）

函数之前，问题与行

$key:newformcontrol（“”）

有关。。。您正在将变量

$key

分配给一个隐藏的输入字段-我没有看到任何代码用值填充该输入。。。所以$key的值永远不会改变，所以

$key.value

仍将是一个空字符串。所以，请更新您的答案，因为我在FormControl中分配了变量

$key='null'

，它工作了！我将这一行更改为

$key:newformcontrol（null），

，现在它可以工作了。你的回答帮助我找到了解决办法。