数据未发布到 Firebase答案

【问题标题】：Data not publishing to firebase数据未发布到 Firebase
【发布时间】：2018-10-16 13:39:45
【问题描述】：

我正在尝试将数据推送到 firebase，但它没有显示在 firebase 控制台中。还安装了所有 npms。我正在附加所有相关文件。

服务文件：

import { Injectable } from '@angular/core';
import {FormControl,FormGroup, Validators} from '@angular/forms';
import {AngularFireDatabase, AngularFireList} from 'angularfire2/database';
@Injectable()
export class QuestionService {


  constructor(private firebase: AngularFireDatabase) { }
  questionList:AngularFireList<any>;


  form = new FormGroup({
    $key: new FormControl(null),
    newQuestion: new FormControl('', Validators.required)

  });

  getQuestions(){
    this.questionList = this.firebase.list('questions');
    return this.questionList.snapshotChanges();
  }

  insertQuestion(question){
    this.questionList.push({
      questionName: question.questionName
    });
  }

}`

HTML：

<mat-toolbar color="primary">
    <mat-toolbar-row>
      <button routerLink="/" mat-flat-button color="primary" id="Admin"> Questionnaire App</button>

      <span class="example-spacer"></span>
    </mat-toolbar-row>
</mat-toolbar>

<br>
<br>


<div class="row">
  <div class="col-md-5">
    <form [formGroup]="this.questionService.form" (ngSubmit)="onSubmit()">
      <input type="hidden" formControlName="$key">
      <div class="form-group">
          <input formControlName="newQuestion" class="form-control" type="text" placeholder="Add Question">
      </div>
      <br>
      <div class="form-group">
        <input type="submit" class="btn btn-success" id="submit" value="Submit">
      </div>
    </form>






  </div>
  <div class="col-md-6">
      <!-- <ul class="list-group " *ngFor="let question of questions">
          <li class="list-group-item">{{this.question}}<button type="button" class="btn btn-danger">Delete</button><button type="button" class="btn btn-primary">Edit</button></li>
        </ul> -->
  </div>

</div>

组件：

import {Component, OnInit } from '@angular/core';
import {FormBuilder,FormGroup} from '@angular/forms';
import {MatToolbarModule} from '@angular/material/toolbar';
import {QuestionService} from '../shared/question.service';
import {AngularFireDatabase} from 'angularfire2/database';
import { Observable } from 'rxjs-compat';
import { map } from 'rxjs-compat/operators';
@Component({
  selector: 'app-admin',
  templateUrl: './admin.component.html',
  styleUrls: ['./admin.component.css']
})
export class AdminComponent implements OnInit {
  constructor(private questionService: QuestionService){}
  submitted:boolean;
  formControls=this.questionService.form.controls;

  ngOnInit(){}

  onSubmit(){
    this.submitted = true;
    if(this.questionService.form.valid){
      if(this.questionService.form.get('$key').value==null)
        this.questionService.insertQuestion(this.questionService.form.value);
      this.submitted=false;
    }
  }
}

注意：我已将 firebase 配置添加到 environment.ts。我该如何解决这个问题？控制台没有抛出任何错误。我有什么遗漏吗？

【问题讨论】：

你为什么要让FormGroup服务？
我认为是因为您在添加时没有初始化firebase数组。不久前我也遇到过类似的问题。试试这个：this.questionList = this.firebase.list('questions'); 在开头的 InsertQuestions 函数中
上面试过了，不行

标签： angular firebase firebase-realtime-database angularfire2

【解决方案1】：

我已经尝试了您的代码，但控制台出现错误。

@PatricioVargas 提到第一个 this.questionList 未定义：

ERROR TypeError: Cannot read property 'push' of undefined

第二个是push函数中question.questionName是未定义的：

ERROR Error: Reference.push failed: first argument contains undefined in property 'questions.questionName'

表单组中的属性名为 $key 和 newQuestion 而不是 questionName。为您服务：

insertQuestion(question) {
    this.questionList = this.firebase.list('questions');
    this.questionList.push({
        questionName: question.newQuestion
    });
}

【讨论】：