Ionic3でchatを写経してみる（４）FirebaseでCreateとRead

2018年3月14日

前回に引き続き、以下のサイトをIonic3に変更しながら、写経していきたい。

https://qiita.com/Yamamoto0525/items/c1ec1b7ce2350b294aeb

（環境）

VisualStudioCode

C:/ionic3/ フォルダに、firebase-chat アプリを作成している。

http://twosquirrel.mints.ne.jp/?p=22530

今回は、上記の続きである。

（１）新しいコメントの追加。（Firebaseにデータを書き込む。）

AngularFireListのpushメソッドを用いる。

src/pages/home/home.ts

（変更前）

（変更後）

 

import { AngularFireDatabase, AngularFireList } from 'angularfire2/database';
 
 
public FB_comments: AngularFireList<{}>;
 
 
this.FB_comments = db.list('comments');
 
this.FB_comments.push(new Comment(this.current_user, comment));
this.content = '';

この状態でコメントを入力して、SENDをクリックすると、Firebaseの方にデータが入力されるのが分かる。

（２）作成したデータを読み込む（Firebaseに作成したデータを読み込む）

よくわからないが、

AngularFireList<{}>

の、snapshotChanges().subscribe()　メソッドを用いるらしい。

コピペしているだけなので、理解できていない。

this.songs = afDatabase.list('/songs').valueChanges();

のように、valueChanges()　を使っているサイトもあるのだが、違いはよく分からない。

src/pages/home/home.ts

（変更前）

（変更後）

 

src/pages/home/chat.ts

（変更前）

（変更後）

 

あｓｄ

src/pages/home/home.html

（変更前）

（変更後）

Ctrl + C でサーバを一旦停止してから、再び、ionic serve

さらに、タイプミスを訂正。

やっと、書き込むことができるようになった。

いつの間にか、チャットではなく、独り言になっているが、、、

 

これで、Createはできるようになった。

あとは、UpdateとDelete。。。

続きは今度。。。