Firebase:RealtimeDatabase + Angular

前回の続き。

Realtime Databaseからデータをとってきて表示するところまでやったので、今回は、データの追加をやってみたいと思う。

前回の続きなので、ソースは前回の続きに追加をしていくことになります。

１）クラスの追加
クラスを作ることは本筋では無いのですが、試しに作ってみます。
今回作るのは、データ１件を示す Item クラスです。

コンソールから

ng generate class class/Items

を実行すると、クラスができます。そこを以下の用に変更する。

export class Items {
  name: string;
  value: string;

  constructor( name: string, value: string) {
    this.name = name;
    this.value = value;
  }
}

２）コンポーネントの修正
場所：プロジェクト/src/app/app.component.ts

まずは、インポートを追加。

import { AngularFireList } from 'angularfire2/database';
import { Items } from './class/Items';

データをどんどん追加していくので、AngularFireListを使います。
Itemsは、さっき作ったItemです。

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  test: Observable<any>;

  items: Observable<any[]>;
  itemsList: AngularFireList<any>;

  constructor(private db: AngularFireDatabase) {
    this.itemsList = db.list('/items');
    this.items = this.itemsList.valueChanges();
  }

  addItem(name: string, value: string): void {
    if (value && name ) {
      this.itemsList.push(new Items(name, value));
    }
  }
}

前回からの変更点は、itemsListとして、AngularFireList を作成してるところ。
このitemListを監視し、データを取得したり、追加したりしている。

３）画面の修正
Itemを追加できるようにします。

<section>
<ng-container *ngFor="let item of items | async">
  <div>{{item.name}}：{{item.value}}</div>
</ng-container>
</section>
<section>
  <form>

    <button type="submit" (click)="addItem(name,value)">送信</button>
    <div>
      <textarea [(ngModel)]="name" name="name" class="form-control" placeholder="メッセージを入力" > </textarea>
      <textarea [(ngModel)]="value" name="value" class="form-control" placeholder="メッセージを入力" > </textarea>
    </div>

  </form>
</section>

前回からの変更点としては、formを作って、そこから先程コンポーネントに作成したaddItemメソッドを呼んでるところ。
そして、データを表示するところについては、複数件あるので、ngForというfor文でぐるぐるまわししてるところ。

はい。これだけ。カンタンですねー。