Ion-item-sliding no working in v4 after reload items

Ionic Framework
1

Hello,

I have an ion-list that shows a list of ion-item-sliding with the option of “delete” in each one. When I delete one, I reset the array of elements and ask to the server to get me all of them again. After reload all items, the sliding is not working, it is showing the items but I can not slide any of them.

Could you help me?

HTML

<ion-content>
    
  <div >      
      <ion-segment [(ngModel)]="typeConf" >
        <ion-segment-button value="Users">
          <div > <ion-icon slot="start" name="person"></ion-icon > Usuarios </div>
        </ion-segment-button>
        <ion-segment-button value="Profiles">
          <div > <ion-icon slot="start" name="people"></ion-icon > Perfiles </div>
        </ion-segment-button>
        <ion-segment-button value="NewUsers">
          <div > <ion-icon slot="start" name="person-add"></ion-icon > Esperando <ion-badge color="danger" *ngIf="getNumUser()">{{getNumUser()}}</ion-badge> </div>
        </ion-segment-button>
      </ion-segment>
    </div>  
    ....
      <ion-list *ngSwitchCase="'Profiles'">
        <ion-item-sliding *ngFor="let p of sqlProfiles">
          <ion-item >
            {{p.name}}
            <ion-icon name="arrow-dropleft" color="primary" slot="end"></ion-icon>
          </ion-item>
          <ion-item-options>
            <ion-item-option color="danger" (click)="presentPromptDelProfile(p)">
              <ion-icon name="trash"></ion-icon>
              Del.
            </ion-item-option>
          </ion-item-options>
        </ion-item-sliding>     
      </ion-list>
  
  ....
        
    </div>
  </ion-content>

.TS

async presentPromptDelProfile(profile){
 
   const alert = await this.alertCtrl.create({
     header: 'Borrar perfil: '+ profile.name,
     message: '¿Desea borrar el perfil?',
     buttons: [
       {
         text: 'Cancelar',
         role: 'cancel',
         handler: data => {
           console.log('Cancel clicked');
         }
       },
       {
         text: 'Borrar',
         handler: data => {
           
             this.delProfile( profile);
           
         }
       }
     ]
   });
   await alert.present();
 }

 delProfile(profile) {
   this.provMess.modifyObj('delProfile',{idProf:profile.id, siteID:this.global.user.siteID}).then(elements => {
             this.sqlProfiles = elements;
         }).catch(err=>{
             console.log("ERROR DELETING PROFILES");
         });
 }

Ionic:

ionic (Ionic CLI) : 4.8.0 (C:\Users\villa\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : @ionic/angular 4.0.0-rc.1
@angular-devkit/build-angular : 0.11.4
@angular-devkit/schematics : 7.1.4
@angular/cli : 7.1.4
@ionic/angular-toolkit : 1.2.2

Cordova:

cordova (Cordova CLI) : not installed
Cordova Platforms : android 7.1.4
Cordova Plugins : not available

System:

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

2

Maybe that workaround https://github.com/ionic-team/ionic/issues/15486#issuecomment-420025772 ?

1 Like
3

Thanks @reedrichards this solve the problem. I thing is a bug problem of v4. Even you don’t need to delete an item to have this problem. If you leave one item open and you navigate to another page and return another time the item-sliding doesn’t work.

1 Like