[Ionic V4.0.0-beta.7] [ion-item-sliding] Sliding not working after empty an element in array

Bug Report

Ionic Info Run ionic info from a terminal/cmd prompt and paste the output below.

Ionic:

   ionic (Ionic CLI)          : 4.1.2 (C:\Users\fkrishna\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.7
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

System:

   NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

Describe the Bug I created an array of 3 elements and i used the <ngFor> and the <ion-item-sliding">directive to show a list of sliding item. Each item has a remove button to remove the target element, but after removing one element the sliding stop working for the remaining items

Steps to Reproduce Steps to reproduce the behavior:

1. Go to ‘…’
2. Click on ‘…’
3. Scroll down to ‘…’
4. See error

Related Code

<ion-content>
  <ion-list>
    <ion-item-sliding *ngFor="let n of numbers; index as i">
      <ion-item>
        {{ n }}
      </ion-item>
      <ion-item-options>
        <ion-item-option " (click)="remove(i)">Delete</ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

numbers = ['1','2','3'];
  constructor() {}
  remove(i) {
    this.numbers.splice(i, 1);
}

Expected Behavior the sliding is suppose to work correctly for each items even after removing an element

Additional Context List any other information that is relevant to your issue. Stack traces, related issues, suggestions on how to fix, Stack Overflow links, forum links, screenshots, OS if applicable, etc.

[jcollings]

Also had the same issue, with a dynamic list of elements, deleting an item with the <ion-item-sliding> component, then refreshing the elements cause it not to be able to delete any other elements until a refresh.

After digging around i noticed that without the refresh of elements it worked fine, looking at the docs there is a method to close all sliding items on the item or on the list. using this fixed the issue.

1. Giving the ion-list an id #dynamicList
2. Accessing that list by the id @ViewChild('dynamicList') dynamicList;
3. On clicking of <ion-item-option> triggering the dynamicList.closeSlidingItems() before deleting the record.

Hope this helps in the meantime, i am new to angular so hopefully i am not doing anything that stupid.

[peterpeterparker]

not all heroes wear capes, thx @jcollings for the solution!

html:

 <ion-list #slidingList>
   <ion-item-sliding>
     <ion-item-options side="end">
        <ion-item-option (click)="delete()">
        </ion-item-option>
     </ion-item-options>
   </ion-item-sliding>
 </ion-list>

ts:

 import {List} from '@ionic/angular';

 @ViewChild('slidingList') slidingList: List;
 
 async delete() {
   // something
   await this.slidingList.closeSlidingItems();
 }