尝试将电子邮件发布到Firebase控制台

Question

我的问题是关于尝试将电子邮件发布到Firebase控制台，而我的chrome开发人员工具没有抛出任何错误。但是，电子邮件不会在Firebase控制台中显示。单击主页上的提交时，应该存储电子邮件。

HTML

<mat-toolbar color="primary">
  <mat-toolbar-row>
    <span> App</span>
    <span class="example-spacer"></span>
    <button routerLink="/admin" mat-flat-button color="primary" id="Admin">Admin</button>

  </mat-toolbar-row>
</mat-toolbar>

<br>
<br>
<form [formGroup]="this.userInfoService.form" (ngSubmit)="onSubmit()">
    <input type="hidden" formControlName="$key">

    <div class="form-group">
        <input formControlName="newEmail" class="form-control" type="text" placeholder="Email" >
        </div>


<div class="example-container">

  <br>
  <mat-form-field>
    <input matInput placeholder="First Name">
  </mat-form-field>
  &nbsp;
  <mat-form-field>
    <input matInput placeholder="Last Name">
  </mat-form-field>
</div>
<div>
<h4>Instructions:</h4>
<mat-list>
  <mat-list-item>1. Please note that there is no time limit.</mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item>2. It is mandatory to answer all the questions.</mat-list-item>
  <mat-divider></mat-divider>
  <mat-list-item>3. You will have a chance to review before submitting.</mat-list-item>
</mat-list>
</div>
<br>
<br>
<div class="form-group">
  <!-- <button routerLink="/question-page" mat-flat-button color="primary" id="start">Start</button> -->
  <input type="button"  routerLink="/question-page" class="btn btn-success" id="submit" value="Submit">

</div>
</form>


<!-- <div class="example-container">
  <mat-form-field>
    <input matInput placeholder="Enter your email" [formControl]="email" required>
    <mat-error *ngIf="email.invalid">{{getErrorMessage()}}</mat-error>
  </mat-form-field>
</div> -->

服务文件：

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

@Injectable()
export class UserInfoService {

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

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

  });

  getEmail(){
    this.emailList = this.firebase.list('emails') ;
    return this.emailList.snapshotChanges();
  }

  insertEmail(email){
    this.emailList = this.firebase.list('emails');
    this.emailList.push({
      newEmail: email.newEmail
    });

  }
}

组件：

import { Component, OnInit } from '@angular/core';
import {FormControl, Validators} from '@angular/forms';
import {MatButtonModule} from '@angular/material/button';
import {UserInfoService} from '../shared/user-info.service';

@Component({
  selector: 'app-welcome',
  templateUrl: './welcome.component.html',
  styleUrls: ['./welcome.component.css']
})
export class WelcomeComponent implements OnInit {

  constructor(private userInfoService: UserInfoService) { }
  submitted:boolean;
  formControls=this.userInfoService.form.controls;


  ngOnInit() {
  }

  onSubmit(){

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

    }
  }

}

XXXXXXX：注意：我只是想阅读电子邮件XXXXXXXXXXXXXXX