如何使用 Angular2 向 Firebase 添加数据？答案

【问题标题】：How to add data to Firebase with Angular2?如何使用 Angular2 向 Firebase 添加数据？
【发布时间】：2017-08-29 19:20:07
【问题描述】：

如何使用 Angular2 方法将表单中的值推送到 Firebase？到目前为止我有这个代码。

我的表单组件

export class addContentComponent {
    add: FormGroup;
    constructor(public fb: FormBuilder) {
        this.add = this.fb.group({
            firstname: ['', Validators.required],
            lastname: ['', Validators.required],
                  });   };
  submitadd() { 
           const fbdbref = firebase.database().ref('add').push({

              /* I am not sure where to go from here*/

           });
    }
}

我的 HTML

<form (ngSubmit)="submitadd()"class="ui form" [formGroup]="add" novalidate>
 <input type="text" class="text-muted-signature" [formControl]="add.controls['firstname']" placeholder="FirstName" required>

 <input type="text" class="text-muted-signature" [formControl]="add.controls['lastname']"  placeholder="LastName">

  <p>
<button  [disabled]="!add.valid" type="submit">add it!</button>
                                            </p>

【问题讨论】：

试试：firebase.database().ref('add').push(this.add.value);
非常感谢...这简直太棒了，它奏效了！

标签： angular firebase firebase-realtime-database angular2-forms

【解决方案1】：

您可以使用官方插件 angularfire2 插件来使用 Angular2 的 firebase db。

您可以从以下链接下载插件：https://github.com/angular/angularfire2 read.md 中提供了进一步的过程

这就是我向 firebase db 显示和添加数据的方式

import { Component, OnInit } from '@angular/core';
import {AngularFireDatabase, FirebaseListObservable} from  'angularfire2/database';

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers:[AngularFireDatabase]
})
export class AppComponent implements OnInit{
  title = 'app';
  model={};
  hostEl:any;
  items: FirebaseListObservable<any[]>;

  constructor(private db: AngularFireDatabase, private el:ElementRef,private renderer: Renderer2) {
this.items = db.list('/users'); // To fetch data from db
this.hostEl =  el.nativeElement;
console.log(this.items);

}

addToDb() {
  console.log(this.model);
  this.db.list('/users').push(this.model);
 }

}

希望对你有帮助:)

【讨论】：