Данные не публикуются в базе данных - PullRequest
Новая
       23

Данные не публикуются в базе данных

0 голосов
/ 15 октября 2018

Я пытаюсь отправить данные в базу данных 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.Как я могу решить это?Консоль не выдает никаких ошибок. Есть что-то, чего мне не хватает?

1 Ответ

0 голосов
/ 16 октября 2018

Я попробовал ваш код, и консоль выдает ошибки.

Первый из них, как упомянуто @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
    });
}
...