我们介绍了Firebase authentication和部署到Firebase hosting.现在，让我们探索一下如何使用AngularFire2库在角度2+应用程序中开始使用实时数据库。通过填充和执行数据库操作，FireBase可以非常轻松地快速启动和运行。

<$>[注意]我们将在文章中使用TODOS 作为我们的示例。每个待办事项都有一个用于待办事项描述的内容字符串值和一个用于指示待办事项是否已完成的完成布尔值。<$>

设置

首先，您需要导入AngularFireDatabase和AngularFireList，并将前者注入到构造函数中：

 1[label app.component.ts]
 2import { Component, OnInit } from '@angular/core';
 3import { Observable } from 'rxjs/Observable';
 4
 5import { AngularFireDatabase, AngularFireList }
 6  from 'angularfire2/database';
 7@Component({ ... })
 8export class AppComponent implements OnInit {
 9  todos$: AngularFireList<any[]>;
10  constructor(private af: AngularFireDatabase) {}
11  ngOnInit() {
12    // ...
13  }
14  addTodo(value: string): void {
15    // ...
16  }
17  deleteTodo(todo: any): void {
18    // ...
19  }
20  toggleDone(todo: any): void {
21    // ...
22  }

您还需要确保您的应用程序模块中提供了AngularFireDatabase：

1[label app.module.ts]
2// ...
3
4import { AngularFireModule } from 'angularfire2';
5import { environment } from '../environments/environment';
6import { AngularFireDatabase } from 'angularfire2/database';

阅读所有内容

只需声明一个AngularFireList类型的类属性，并在OnInit生命周期钩子中使用AngularFireDatabase.list从Firebase数据库获取/todos节点：

1todos$: AngularFireList;
2
3ngOnInit() {
4  this.todos$ = this.af.list('/todos');
5}

返回的observable将包含数据库中/todos下的所有todos。您还可以传入一个对象作为第二个参数，以提供查询或筛选选项。假设我们只需要前3个todo项目：

1this.todos$ = this.af.list('/todos', ref => 
2  ref.limitToFirst(3)
3);

您可以使用如下所示的Async pipe：

1<ul>
2  <li *ngFor="let todo of (todos$ | async)" [class.done]="todo.done">
3    {{ todo.content }}
4  </li>
5</ul>

♪创建全部

添加一个新的todo项目非常简单，只需在AngularFireList实例上调用push：

1addTodo(value: string): void {
2  this.todos$.push({ content: value, done: false });
3}

更新和删除待办事项

要更新或删除待办事项，情况会有所不同，因为您需要对要更新或删除的待办事项的引用。这可以通过AngularFireDatabase.object来实现。Firebase中的对象有一个唯一的键，即$key：

下面是如何切换待办事项的已完成状态：

1toggleDone(todo: any): void {
2  this.af.object('/todos/' + todo.$key)
3    .update({ content: todo.content, done: !todo.done });
4}

或更新其内容：

1updateTodo2(todo: any, newValue: string): void {
2  this.af.object('/todos/' + todo.$key)
3    .update({ content: newValue, done: todo.done });    
4}

<$>[注]作为Firebase对象上的UPDATE方法的替代方法，您也可以使用set。使用set方法将在不存在的情况下创建一个新项，并替换为整个对象，因此具有破坏性。<$>

♪拼写Everyone

删除项目与更新项目一样简单：

1deleteTodo(todo: any): void {
2  this.af.object('/todos/' + todo.$key).remove();
3}

<$>[注意]请注意，设置、更新和删除向您返回一个承诺，您可以链接Then/Catch调用，以允许您对成功的操作或错误采取行动。<$>

使用 AngularFire2 在 Angular 中进行基本的 Firebase CRUD 操作

设置

更新和删除待办事项