スポンサーリンク

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

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

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

(環境)

VisualStudioCode

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

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

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

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

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

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プロパティを追加

 

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

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

}

 

未分類

Posted by twosquirrel