Ionic4+Firebaseでパスワード制限つきチャットアプリ（２）AngularのngForでチャットコメントを実装する
前回は、チャット画面を作成ました。
http://twosquirrel.mints.ne.jp/?p=27948
今回は、引き続き、以下のサイトを写経して、チャットコメントを実装していきます。
https://qiita.com/Yamamoto0525/items/5ee362967295ec4d2c65
（開発環境）
git version 2.17.1.windows.2
Sourcetree Version 2.6.9.0
VisualStudioCode 1.27.1
（０）やること
ngModelによる双方向データバインディング （FormsModule のimportが必要？）
ngFor で、コメントを繰り返し表示
（１）ngModelによる双方向データバインディング
home.module.ts の確認
デフォルトで、src/app/home/home.module.ts には、FormsModuleが importされている。
home.page.ts
（変更前）
（変更後）
home.page.html
（変更前）
（変更後）
これにより、下にtest中！ と書き込むと、上の欄にも自動的に、同じ文字列が表示される。
（２）ngFor で、コメントを繰り返し表示する。
chatモデルの作成
ionic g class models/chat
src/app/models/chat.ts
（変更後）
src/app/home/home.page.ts
（変更前）
（変更後）
src/app/home/home.page.html
（変更前）
（変更後）
この時点でのソースコード
https://github.com/adash333/ionic4-firebase-chat/tree/90b8da1d3264eb1ed56293fbb4a13f2ce5e5c612
引き続き、以下を写経していく。
https://qiita.com/Yamamoto0525/items/a6995da3ffbb4985c5e2
（３）ngIf で自分のコメントを表示
自分と自分以外を判別するフラグをつける
src/app/models/chat.ts
（変更前）
（変更後）
app/home/home.page.ts
（変更後）
ngIfで自分のuidを判別し、自分のコメントとして表示させる
commentのuidとCURRENT_USERのuidを比較して、値が等しい時は右側に自分のアイコンが出るよう設定。
Ionic4では、
<ion-avatar slot="start"> // アイコンが、ひだり側 <ion-avatar slot="end"> // アイコンが、みぎ側
のように、アイコンの位置を指定します。
app/home/home.page.html
（変更前）
（変更後）
app/home/home.page.scss
（変更後）
（４）submitイベントで新しいコメントを追加する
addComment関数を定義
app/home/home.page.ts
app/home/home.page.html
（変更前）
（変更後）
コメントを入力して、SEND をクリックすると、コメントが記載される。
（まだ自動でスクロールされないし、コメント欄もクリアされない。）
● addComent()したら、コメント欄がクリアされるようにする。
● 自動で下にスクロールされるようにする。
content.scrollToBottom関数
app/home/home.page.ts
（変更前）
（変更後）
リファクタリング、、、
上記により、自動的に下までスクロールされるようになった。
ここまでのソースコード。
https://github.com/adash333/ionic4-firebase-chat/tree/3d61deb4ed7995137d2dd590266b8900026cef72
参考：https://forum.ionicframework.com/t/ioinc-4-form-and-submit-button/136988/3
（参考）http://www.fumiononaka.com/Business/html5/FN1805006.html
