Question

我在浏览器上运行离子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>

Answer 1

尝试将（click）=＆＃34; itemDetails（$ event，item）＆＃34;进入离子项目

<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

Answer 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
}

我认为这会对你有所帮助

Answer 3

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

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

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

Answer 4

您可以使用observable并使用异步管道。

我在智能手机上，无法提供示例，但应该有足够的内容。

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

Answer 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
 }

删除项目列表离子幻灯片3

5 个答案: