スポンサーリンク

ionic3とfirebaseでチャットの写経にtry(3)

Angular 2 (, Angular 4, ionic3)に関しては以下の本がお勧めです!

(環境)
Windows8.1
image_thumb2_thumb_thumb

前回は、Ionic3+Firebase連携の最初のところまでを行った。

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

今回は、CRUDを実装したい。。引き続き以下のサイトを写経していく。

Angular+Firebaseでチャットアプリを作る
Yamamoto0525
2017年06月22日に更新
http://qiita.com/Yamamoto0525/items/a76ea4b3924eeb82b0f9

(1)新しいコメントを作成する

home.ts

image

ブラウザから書き込んでみると、firebaseのデータに即時反映される

image

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

home.ts

image

src/models/chat.ts

image

home.html

image

この状態で、書き込みをもう一回してみる。

image

うまくいっているようである。

(3)作成したデータを編集、削除する

●編集フィールドの切り替え

home.ts
image

src/models/chat.ts
image

home.html
image

●編集した内容を更新する

home.ts
image

編集ボタンをクリックして編集し、保存をクリック

image

image

だめだった。

Runtime Error
Cannot read property 'set’ of undefined

ググったけど、このタイプのエラーは、typo(スペルミス)でよくおこるらしいが、下人は全く分からん。あと少しなのに。。。がっくし。

(4)AlertがIonic特有だったことを思い出し、訂正してみる

https://ionicframework.com/docs/components/#alert
image

だめだ、うまくいかない。。。

image

いろいろやったが、どうしてもupdateはうまくいかなかった。。。

updateはあきらめる。

よくわからないので、

chat.ts
https://github.com/Yamamoto0525/NgChat/blob/3f4a221c3e3bfb19a225af49d9ad24791a4e5f09/src/app/class/chat.ts

home.ts
https://github.com/Yamamoto0525/NgChat/blob/3f4a221c3e3bfb19a225af49d9ad24791a4e5f09/src/app/app.component.ts

などを参考にコードをできる限りコピペ。firebaseのkeyを、$keyにしてみたりしたが、原因不明。

最初は、削除ボタンを押すと、全部消えてしまったりして、とにかく、keyの指定がうまくいっていないようえあった。

最終的には、なぜか、編集もdeleteもうまくいった。

home.ts
image

chat.ts
image

home.html
image

image

エラーの大半はタイプミス(typo)であるのだろうが、どこをtypoしているのか見つけるのがむちゃくちゃ難しい。今回も、どこがミスっていたのか分からないまま、他人のコードをコピペさせていただき、なんとか終わった。これでは自分では何一つ作ることができないかも、、、(泣)

この時点でのソースコード

https://github.com/adash333/ionic3-chat/commit/77969c4b6187809bb6d91bcfdf27f4366eaadb5a
 

次は、本当は、ログイン機能をつけたい!厳しいか。。。

(参考)

https://www.djamware.com/post/5855c96380aca7060f443065/ionic-2-firebase-crud-example-part-2

Angularfire2 で構造化したリレーションキーリストからデータ取得と監視
jyjoestrummer
2017年04月24日に投稿
http://qiita.com/jyjoestrummer/items/a237354f185c9d59126b

AngularFire2のAPI速習
kohashi
2017年04月10日に投稿
http://qiita.com/kohashi/items/684b60df84f8bd922162

連載: Angular2で学ぶFirebase入門 (1)
FirebaseとAngular2を使ってリアルタイムでデータのやり取り【導入編】
林 優一
2016年6月27日
https://html5experts.jp/frontainer/19689/

 

 

 

途中

 

np--save

スポンサーリンク