Ionic3でchatを写経してみる（５）FirebaseでUpdateとDelete

2018年3月15日

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

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

（環境）

VisualStudioCode

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

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

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

（１）作成したデータを編集、削除する

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

htmlのコメント部分に編集ボタンと削除ボタンを追加

src/pages/home/home.ts

（変更前）

（変更後）

const key = action.payload.key(); // 追加
this.comments.push(new Comment(val.user, val.content).setData(val.date, key)); // 更新
 
 
// 編集フィールドの切り替え
toggleEditComment(num: number) {
this.comments[num].edit_flag = (this.comments[num].edit_flag) ? false : true;
}

 

src/pages/home/chat.ts

（変更前）

（変更後）

key?: string; // 追加
edit_flag?: boolean; // 追加
 
 
 
// 取得した日付を反映し、さらに、更新フラグをつける
setData(date: string, key: string): Comment { // 更新
this.date = date;
this.key = key; // 追加
this.edit_flag = false; // 追加
return this;
}

 

src/pages/home/home.html

（変更前）

（変更後）

 

ngForにlet i=index;を追加

Commentクラスにkeyプロパティを追加

 

（２）編集した内容を更新する

home.ts

（変更前）

（変更後）

なぜかうまくいかず、、、途中。

 
// コメントを更新する
saveEditComment(num: number, key: string) {
this.FB_comments.update(key, {
content: this.comments[num].content,
date: this.comments[num].date
}).then( () => {
alert('コメントを更新しました');
this.comments[num].edit_flag = false;
});
}
 
// コメントをリセットする
resetEditComent(num: number) {
this.comments[num].content = '';
}