删除项目列表 ionic slide 3

Question

I run ionic 3 app on browser, when I slide, and click on delete it redirect on the itemDetails instead to reload the same list without the item deleted

<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

Try to put the (click)="itemDetails($event, item)" into the 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>

See working plunkr: https://plnkr.co/edit/FfaUWDxovuS0So5fvHCU?p=preview

Answer 2

You done very well my friend but you need to do like this

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

and in .ts file you need to write this

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

i think this would be helpful to you

Answer 3

I added this code to the removeItem function :

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

So it seems to redirect to the main list but it is not the best way i think because reload the page is very slow

Answer 4

You can work with observables and use the aync pipe.

I am on my smartphone and cant provide examples but there should be enough out there.

Or you could try it with ngzone after deleting to Trigger an ui refresh.

Answer 5

The problem is the list of items is not getting the updated list. You have get the updated list after deleting it.

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
 }