スポンサーリンク

Ionic3でchatを写経してみる(4)FirebaseでCreateとRead

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

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

(環境)
image_thumb7_thumb_thumb_thumb_thumb[2]

VisualStudioCode

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

Ionic3でchatを写経してみる(3)

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

(1)新しいコメントの追加。(Firebaseにデータを書き込む。)

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

src/pages/home/home.ts

(変更前)
image

(変更後)
image

image

 

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の方にデータが入力されるのが分かる。

image

(2)作成したデータを読み込む(Firebaseに作成したデータを読み込む)

よくわからないが、

AngularFireList<{}>

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

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

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

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

src/pages/home/home.ts

(変更前)
image

(変更後)
image

image

 

src/pages/home/chat.ts

(変更前)
image

(変更後)
image

 

あsd

src/pages/home/home.html

(変更前)
image

(変更後)
image

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

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

image

image

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

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

 

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

あとは、UpdateとDelete。。。

続きは今度。。。

スポンサーリンク