删除项目列表 ionic slide 3答案

【问题标题】：Delete item list ionic slide 3删除项目列表 ionic slide 3
【发布时间】：2017-10-30 11:31:57
【问题描述】：

我在浏览器上运行 ionic 3 应用程序，当我滑动并单击删除时，它会重定向到 itemDetails，而不是重新加载相同的列表而不删除项目

<ion-list>
    <ion-item-sliding *ngFor="let item of items" (click)="itemDetails($event, item)" (ionSwipe)="delete(item)">
     <ion-item> 
     {{item.name}}
     </ion-item>

     <ion-item-options>
        <button ion-button expandable (click)="removeItem(item.id)">Delete</button>
     </ion-item-options>
    </ion-item-sliding>
</ion-list>

【问题讨论】：

标签： ionic-framework ionic3

【解决方案1】：

尝试将 (click)="itemDetails($event, item)" 放入 ion-item

<ion-list>
<ion-item-sliding *ngFor="let item of items" (ionSwipe)="delete(item)">
 <ion-item (click)="itemDetails($event, item)"> 
 {{item.name}}
 </ion-item>

 <ion-item-options>
    <button ion-button expandable (click)="removeItem(item.id)">Delete</button>
 </ion-item-options>
</ion-item-sliding>

查看工作 plunkr：https://plnkr.co/edit/FfaUWDxovuS0So5fvHCU?p=preview

【讨论】：

【解决方案2】：

我的朋友，你做得很好，但你需要这样做

<ion-list>
    <ion-item-sliding *ngFor="let item of items; let i=index;" (click)="itemDetails($event, item)">
        <ion-item> 
            {{item.name}}
        </ion-item>

        <ion-item-options>
            <button ion-button expandable (click)="removeItem(i)">Delete</button>
        </ion-item-options>
    </ion-item-sliding>
</ion-list>

在.ts文件中你需要写这个

public removeItem(index:number){
    let id=yourarraylist[index].id
    //remove logic
}

我认为这对你有帮助

【讨论】：

也许我应该刷新视图然后我会看到新列表
在我写完这段代码之后，我认为你不需要刷新视图。

【解决方案3】：

我将此代码添加到 removeItem 函数中：

this.navCtrl.push(HelloIonicPage, {
      item: item
    });

所以它似乎重定向到主列表，但这不是我认为的最佳方式，因为重新加载页面非常慢

【讨论】：

【解决方案4】：

您可以使用可观察对象并使用 aync 管道。

我正在使用智能手机，无法提供示例，但应该有足够的示例。

或者你可以在删除后使用 ngzone 尝试触发 ui 刷新。

【讨论】：

【解决方案5】：

问题是项目列表没有得到更新的列表。删除后你会得到更新的列表。

HTML

<ion-list>
<ion-item-sliding *ngFor="let item of items" (click)="itemDetails($event, item)" (ionSwipe)="delete(item)">
 <ion-item> 
 {{item.name}}
 </ion-item>

 <ion-item-options>
    <button ion-button expandable (click)="removeItem(item.id)">Delete</button>
 </ion-item-options>
</ion-item-sliding>

ts

removeItem(item) {
 `your code`
  loadItems(); #get the updated list
 }

【讨论】：