開発者ドキュメント

AngularFire2を使用したAngularでの基本的なFirebaseCRUD操作

Firebase認証Firebaseホスティングへのデプロイについて説明しました。 次に、 AngularFire2 ライブラリを使用して、Angular2+アプリでリアルタイムデータベースを開始する方法を見ていきましょう。 Firebaseを使用すると、データベースにデータを入力して操作を実行することで、非常に簡単に起動して実行できます。

例では、投稿でTodosを使用します。 各todoには、todoの説明用の content 文字列値と、todoアイテムが完了したかどうかを示すdoneブール値があります。

設定

まず、AngleFireDatabaseAngularFireListをインポートし、コンストラクターに前者を挿入します。

app.component.ts
import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { AngularFireDatabase, AngularFireList }
  from 'angularfire2/database';
@Component({ ... })
export class AppComponent implements OnInit {
  todos$: AngularFireList<any[]>;
  constructor(private af: AngularFireDatabase) {}
  ngOnInit() {
    // ...
  }
  addTodo(value: string): void {
    // ...
  }
  deleteTodo(todo: any): void {
    // ...
  }
  toggleDone(todo: any): void {
    // ...
  }

また、AngleFireDatabaseがアプリモジュールで提供されていることを確認する必要があります。

app.module.ts
// ...

import { AngularFireModule } from 'angularfire2';
import { environment } from '../environments/environment';
import { AngularFireDatabase } from 'angularfire2/database';

Todosを読む

タイプAngularFireListのクラスプロパティを宣言し、OnInitライフサイクルフックのAngularFireDatabase.listを使用してFirebaseデータベースから/todosノードを取得するだけです。

todos$: AngularFireList;

ngOnInit() {
  this.todos$ = this.af.list('/todos');
}

返されるオブザーバブルには、データベースの /todosの下にあるすべてのtodoが含まれます。 2番目の引数としてオブジェクトを渡して、クエリまたはフィルタリングのオプションを提供することもできます。 最初の3つのtodoアイテムだけが必要だとしましょう。

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

次のように非同期パイプを使用して、オブザーバブルをアンラップし、テンプレート内のToDoアイテムを表示できます。

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

Todoの作成

新しいtodoアイテムを追加するのは本当に簡単です。AngularFireListインスタンスでpushを呼び出すだけです。

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

Todoの更新と削除

ToDoを更新または削除するには、更新または削除するToDoアイテムへの参照が必要になるため、状況が少し異なります。 これはAngularFireDatabase.objectで実行できます。 Firebase内のオブジェクトには、 $keyとして使用できる一意のキーがあります。

Todosの更新

ToDoの完了状態を切り替える方法は次のとおりです。

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

または、そのコンテンツを更新します。

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

Firebaseオブジェクトのupdateメソッドの代わりに、setを使用することもできます。 set メソッドを使用すると、アイテムが存在しない場合は新しいアイテムが作成され、オブジェクト全体に置き換えられるため、破壊的です。

Todosの削除

アイテムの削除は、更新するのと同じくらい簡単です。

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

set update remove は、 then / catch 呼び出しを連鎖させて、成功した操作またはエラーに基づいて行動します。

モバイルバージョンを終了