删除 ionic 3 中的滑动手势答案

【问题标题】：Delete Swipe gestures in ionic 3删除 ionic 3 中的滑动手势
【发布时间】：2021-03-28 20:54:41
【问题描述】：

我想创建一个离子删除滑动手势，但它似乎不起作用。

**This is my home page ( i called it myPage.html)**
    <ion-header>
      <ion-navbar color="secondary">
        <ion-title align="center">
          My Tasks
        </ion-title>
        <ion-buttons end>
          <button ion-button icon-only (click)="addItem()"><ion-icon name="add-circle"></ion-icon></button>
        </ion-buttons>
      </ion-navbar>
    </ion-header>

    <ion-content>
      <ion-list>
        <ion-item *ngFor="let item of items" (click)="viewItem(item)">{{item.title}}</ion-item>
      </ion-list>
    </ion-content>

    <ion-item-sliding (ionSwipe)="delete(item)">
      <ion-item>Item</ion-item>
      <ion-item-options>
        <button ion-button expandable (click)="delete(item)">Delete</button>
      </ion-item-options>
    </ion-item-sliding>

    <ion-footer>
      <ion-toolbar >
        <ion-title>@2018, MyBlog | by SRM </ion-title>
      </ion-toolbar>
    </ion-footer>

我确实遵循了文档：https://ionicframework.com/docs/api/components/item/ItemSliding/，但我认为我遗漏了一些东西，而且我对此仍然很陌生。谁能帮帮我吗？ :(

【问题讨论】：

标签： angular ionic-framework

【解决方案1】：

根据文档，您需要将 ion-item 放入 ion-item-sliding 组件中。

因此，您的标记结构应该是：

<ion-list>
    <ion-item-sliding *ngFor="let item of items">
        <ion-item>
            {{item.title}}
        </ion-item>
        <ion-item-options side="right">
            <button ion-button (click)="delete(item)">
                <ion-icon name="trash"></ion-icon>Delete
            </button>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>

请参阅此处获取示例：https://stackblitz.com/edit/ionic-eofb82

【讨论】：

@Adrian- 非常感谢它有效！编辑怎么样？它使用与删除相同的代码吗？
@HannaNanna，是的，是一样的，你只需要在点击事件中添加另一个按钮并放入一个编辑功能。
@Adrian- 我确实使用相同的代码创建了一个新按钮.. 但它不起作用。就像我要在模态视图中编辑它一样。
{{item.title}} （对于 html）
@Adrian- 这是 .ts 页面编辑（项目）{ let editModal = this.modalCtrl.create(AddItemPage); editModal.onDidDismiss((item) => { if(item){ this.saveItem(item); } }); editModal.present(); }