Ionic3でchatを写経してみる(5)FirebaseでUpdateとDelete

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

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

(環境)
image_thumb7_thumb_thumb_thumb_thumb[2]

VisualStudioCode

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

Ionic3でchatを写経してみる(4)FirebaseでCreateとRead
前回に引き続き、以下のサイトをIonic3に変更しながら、写経していきたい。 (環境) VisualStudioCode C:/ionic...

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

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

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

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

src/pages/home/home.ts

(変更前)
image

(変更後)
image

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

(変更前)
image

(変更後)
image

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

(変更前)
image

(変更後)
image

image

ngForにlet i=index;を追加

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

(2)編集した内容を更新する

home.ts

(変更前)
image

(変更後)

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

// コメントを更新する

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 = '';

}

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

シェアする

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

フォローする