时间戳

首页 > 解决方案 > 数据未发布到 Firebase

angular - 数据未发布到 Firebase

问题描述

我正在尝试将数据推送到 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。我该如何解决这个问题？控制台没有抛出任何错误。我有什么遗漏吗？

标签： angularfirebasefirebase-realtime-databaseangularfire2

解决方案

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

第一个是 @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
    });
}

推荐阅读