Question

我正在研究Angular 4项目。我正在使用智能表格和表格。

<div class="row">
  <div class="col-lg-12">
    <nb-card>
      <nb-card-header>Default Inputs</nb-card-header>
      <nb-card-body >
        <form #f="ngForm" (ngSubmit) = "addNewStudent(f)" >
        <div class="row full-name-inputs">
          <div class="col-sm-6 input-group">
            <input type="text" placeholder="First Name" class="form-control" name="firstName" [(ngModel)]="data.firstName" />
          </div>
          <div class="col-sm-6 input-group">
            <input type="text" placeholder="Last Name" class="form-control" name="lastName" [(ngModel)]="data.lastName" />
          </div >
            <div class="col-sm-6 input-group">
            <input type="text" placeholder="ID" class="form-control" name="id"[(ngModel)]="data.id" [required]=false />
          </div>
         <button type="submit" class="btn btn-primary">Submit</button>
        <button type="cancel" class="btn ">Cancel</button>

       </form>
      </nb-card-body>
    </nb-card>
      </div>
</div>

在表格的编辑按钮上，表格打开并显示该表格中该行的全部数据，类似表格按钮将打开，添加新数据，其中应添加数据，但如果我只输入一个数据并提交它不会添加它需要所有字段。

添加功能如下：

addNewStudent(f: NgForm)
    {
    console.log(f.value);
    if(this.isAddPage)
       {
       this.service.addNewEnquiry(f.value);
       console.log("addenquiry");
       }
       else{
        this.service.editEnquiry(f.value);
       console.log("editenquiry");
       }
        this.router.navigate(['pages/dashboard1']);

    }

服务中的addNewEnquiry功能如下：

 addNewEnquiry(data) 
{

    this.af.list('/enquirydata/').push(data);

}

当我输入所有字段时，它会将其添加到firebase中，但是当我没有填写所有字段时，它会显示错误。

错误错误：Reference.push失败：第一个参数包含undefined 在属性＆＃39; enquirydata.lastName

Answer 1

如果要将对象推送到Firebase，则不能将属性值等于undefined。 Firebase仅接受值或null。否则你总是会出现这个错误。

在你的情况下：

{id：undefined，lastName：undefined，firstName：undefined}

解决您的问题：

Setup

Answer 2

在将其插入列表之前，您可以从对象中删除未定义的那些。

  addNewEnquiry(data) 
 {
    var newData = data.filter(resp=>{
      if(resp.firstName && resp.lastName) {
        return resp;
     }
    })
   this.af.list('/enquirydata/').push(newData);

 }

空值未以Angular 4格式提交

2 个答案: