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

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

https://qiita.com/Yamamoto0525/items/65d5a0b36eb4dbd8079b
image_thumb[1]

(環境)
image_thumb7_thumb_thumb_thumb_thumb_thumb

VisualStudioCode

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

今回は、https://qiita.com/Yamamoto0525/items/a6995da3ffbb4985c5e2 を写経していきたい。

(1)ngIfで自分のコメントを表示させる。

src/app/class/chat.ts

(変更前)
image

(変更後)
image

src/pages/home/home.ts

(変更後)
image

(2)ngIfで自分のuidを判別し、自分のコメントとして表示させる

src/pages/home/home.html

(変更前)
image

(変更後)(さらに、一度、サーバ停止してから、再度、ionic serveした)
image

(3)submitイベントで新しいコメントを追加する

addComment関数を定義する

src/pages/home/home.ts

(変更前)
image

(変更後)
image

(4)submitイベントをHTMLに追加する

src/pages/home/home.html

(変更後)
image

(5)日付の表示(参考:AngularのPipeを使って、日付を変換する

Angularでは、moment.jsを用いるのが簡単らしい。

今回は、Ionicなので、こちらのdocumentationを参考にやってみる。

https://ionicframework.com/docs/api/components/datetime/DateTime/
image

src/pages/home/chat.ts

(変更前)
image

(変更後)
image

home.html

(変更前)
image

(変更後)
image

とりあえず、いつも、そのときの時刻が表示されてしまっているが、まあ、とりあえず、先へ進む。

この時点でのコードは以下へ。

https://bitbucket.org/adash333/firebase-chat/src/0acba63997903a6306285a1b98a9e6fbb61b0310/src/pages/home/?at=master

引き続き、Firebaseの環境構築を写経していきたい。

<Ionic3でお勧めの本>

関連記事
スポンサーリンク

シェアする

  • このエントリーをはてなブックマークに追加

フォローする