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

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

設定

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

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がアプリモジュールで提供されていることを確認する必要があります。

// ...

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 });    
}

Todosの削除

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

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