webアプリにおける破壊的処理のキャンセル

ionicを使ったときの破壊的処理のキャンセル方法のメモ

デモ

ポイント

• 非同期処理を入れる関数には，asyncを先頭につける
• splice()が配列操作を破壊的に行うため，非破壊なsplice関数を作成

参考

• 公式サイト
• javascriptの配列操作を非破壊にまとめサイト

コード

import { ToastController } from '@ionic/angular';
・
・
    constructor(
 ・
・
     private toastCtrl:ToastController,
    ) {}
・
・
splice(arr:any, index:number, howMany:number /*, elements*/){
  if(toString.call(arr) !== '[object Array]') return null;
  if(arr.length === 0) return null;
  var copy = arr.slice(),
    arg = Array.prototype.slice.call(arguments);
  arg.shift();
  Array.prototype.splice.apply(copy, arg);
  return copy;
}

async deletePost(index:number){

  const pre_posts=this.posts
  this.posts=this.splice(pre_posts,index,1)
  
  const toast = await this.toastCtrl.create({
    message:`削除されました`,
    duration:3000,
    // header: 'Toast header',
    // message: 'Click to Close',
    // position: 'top',
    buttons: [
      // {
      //   side: 'start',
      //   icon: 'star',
      //   text: 'Favorite',
      //   handler: () => {
      //     console.log('Favorite clicked');
      //   }
      // }, 
      {
        text: '元に戻す',
        role: 'cancel',
        handler: () => {
          // console.log(deleate_post)
          // this.posts.push(deleate_post);
          console.log('キャンセルしました');
          this.posts=pre_posts;
        }
      }
    ],
    
  });
  await toast.present();

}