Question

如何使用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>

Answer 1

你可以使用官方插件 angularfire2 插件来使用带有Angular2的firebase数据库。

您可以从链接下载插件：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);
 }

}

希望这会对你有所帮助:)。

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

1 个答案: