Ionic-framework: [Ionic V4.0.0-beta.7] [ion-item-glissant] Le glissement ne fonctionne pas après avoir vidé un élément du tableau

Créé le 7 sept. 2018  ·  30Commentaires  ·  Source: ionic-team/ionic-framework

Rapport d'erreur

Informations ioniques
Exécutez ionic info partir d'une invite de terminal / cmd et collez la sortie ci-dessous.

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

Décrivez le bogue
J'ai créé un tableau de 3 éléments et j'ai utilisé leet ledirective pour afficher une liste d'éléments glissants. Chaque élément a un bouton de suppression pour supprimer l'élément cible, mais après avoir supprimé un élément, le glissement cesse de fonctionner pour les éléments restants

Étapes à suivre pour reproduire
Étapes pour reproduire le comportement:

  1. Aller à '...'
  2. Cliquer sur '....'
  3. Faites défiler jusqu'à «...»
  4. Voir l'erreur

Code associé

<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);
}

Comportement prévisible
le glissement est supposé fonctionner correctement pour chaque élément même après avoir retiré un élément

Contexte supplémentaire
Énumérez toute autre information pertinente à votre problème. Traces de pile, problèmes connexes, suggestions de résolution, liens Stack Overflow, liens de forum, captures d'écran, système d'exploitation le cas échéant, etc.

core bug

Commentaire le plus utile

Également eu le même problème, avec une liste dynamique d'éléments, la suppression d'un élément avec lele composant, puis l'actualisation des éléments l'empêche de ne pas pouvoir supprimer d'autres éléments avant une actualisation.

Après avoir fouillé, j'ai remarqué que sans l'actualisation des éléments, cela fonctionnait bien, en regardant la documentation, il existe une méthode pour fermer tous les éléments glissants sur l'élément ou sur la liste. l'utilisation de cela a résolu le problème.

  1. Donner un identifiant #dynamicList liste d'ions
  2. Accéder à cette liste par l'identifiant @ViewChild('dynamicList') dynamicList;
  3. En cliquant sur <ion-item-option> déclenchez le dynamicList.closeSlidingItems() avant de supprimer l'enregistrement.

J'espère que cela aide en attendant, je suis nouveau dans angular, donc j'espère que je ne fais rien d'aussi stupide.

Tous les 30 commentaires

J'ai eu le même problème.
À propos, les éléments coulissants ne fonctionnent pas après la suppression d'un, besoin de recharger l'application

@ quynh-ng J'ai le même problème, j'ai dû passer à la version bêta.5 :(

Drôle, juste atterri sur ce problème aussi, pourrait confirmer, si je supprime avec une action sur l'élément de la liste déroulante, les éléments restants ne pourraient plus être glissés

ps: en beta.8 c'est aussi le cas

@ quynh-ng même -_-

Également eu le même problème, avec une liste dynamique d'éléments, la suppression d'un élément avec lele composant, puis l'actualisation des éléments l'empêche de ne pas pouvoir supprimer d'autres éléments avant une actualisation.

Après avoir fouillé, j'ai remarqué que sans l'actualisation des éléments, cela fonctionnait bien, en regardant la documentation, il existe une méthode pour fermer tous les éléments glissants sur l'élément ou sur la liste. l'utilisation de cela a résolu le problème.

  1. Donner un identifiant #dynamicList liste d'ions
  2. Accéder à cette liste par l'identifiant @ViewChild('dynamicList') dynamicList;
  3. En cliquant sur <ion-item-option> déclenchez le dynamicList.closeSlidingItems() avant de supprimer l'enregistrement.

J'espère que cela aide en attendant, je suis nouveau dans angular, donc j'espère que je ne fais rien d'aussi stupide.

tous les héros ne portent pas de capes, merci @jcollings pour la 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();
 }

@peterpeterparker cela fonctionne bien mais est-ce une solution ou une solution de contournement?

@ Anthony2539 probablement un peu des deux: stuck_out_tongue_winking_eye:

Je ne sais pas si c'est une demande de fonctionnalité ou un bogue

Certains engagements concernant les glissements ont été faits récemment je pense, alors peut-être que le problème est / va disparaître

Quoi qu'il en soit, disons que cette solution de contournement fonctionne et n'armera pas mon application, je suppose

Je dirais que c'est plus un bug car j'ai dû rétrograder pour que mes tests e2e passent à nouveau

Ce problème est évidemment un bug. Supprimer un élément ne devrait pas avoir besoin de le fermer avant de le supprimer, c'est drôle.

J'ai trouvé qu'une autre solution de contournement consiste à transmettre la référence à ItemSliding à la méthode de suppression, puis à fermer simplement cet élément avant de supprimer l'élément de liste:

HTML:

<ion-list>
  <ion-item-sliding *ngFor="let item of items" #slidingItem>
    <ion-item>>
      {{item.text}}
    </ion-item>
    <ion-item-options (ionSwipe)="deleteItem(slidingItem, item)">
      <ion-button color="danger" (click)="deleteItem(slidingItem, item)">
        <ion-icon name="trash"></ion-icon>
        Delete
      </ion-button>
    </ion-item-options>
  </ion-item-sliding>
</ion-list>

TS:

async deleteItem(slidingItem: ItemSliding, item: Item) {
    slidingItem.close(); // <-- this is the important bit!
    await this.itemService.deleteItem(item);
  }

@ mimacom-klier Merci beaucoup d'avoir parfaitement résolu mon problème.

ne fonctionne pas pour moi !!!

La solution de contournement ne fonctionne pas pour moi, avec ou sans appel des méthodes close ou closeSlidingItems .
Ce que j'ai remarqué, c'est qu'après avoir masqué puis affiché à nouveau l'élément, le glissement ne _semble_ pas fonctionner, mais si vous essayez de faire glisser un élément puis de cliquer à l'endroit où le bouton _doit_ être_, vous pouvez réellement déclencher l'action du bouton.
Voici un exemple de Stackblitz .
Sur Stackblitz, j'utilise @ionic/[email protected] , mais le problème est également là avec @ionic/[email protected] sur ma machine locale.

@bockoblur : J'ai vérifié votre exemple de Stackblitz et j'ai joué un peu avec. Si vous supprimez réellement les éléments de la liste, la solution de contournement semble fonctionner correctement. S'ils sont simplement masqués puis affichés à nouveau, le comportement est exactement celui que vous avez décrit. Cela semble être un problème avec la transformation: translate n'est pas correctement appliqué à l'élément d'élément de liste. Peut-être que le composant ItemSliding utilise toujours l'ancienne référence DOM pour traduire l'élément. Vous pouvez trouver mon exemple modifié ici: https://stackblitz.com/edit/ionic-4-item-sliding-show-hide-error-zxgbmf

Merci d'avoir examiné cela. Cela fonctionne bien.
Néanmoins, c'est toujours un problème qui doit être résolu par l'équipe ionique ...

@ La solution de contournement mimacom-klier fonctionne pour moi sur la dernière Ionic (4.5.0).

EDIT: L' utilisation de la solution

Cette solution fonctionne pour moi en utilisant:
CLI ionique: 4.5.0
Cadre ionique: @ ionique / angulaire 4.0.0-beta.17

Cependant, je pense que c'est toujours un problème qui devrait être résolu, je doute que les développeurs s'attendent à ce comportement.

Pareil pour moi. Solution de contournement. L'essentiel est que cela me sorte d'un grand trou et je suis reconnaissant à @jcollings pour cela

Wauw .. me couvrait toute la journée à ce sujet (la diapositive ne fonctionnait pas non plus après la mise à jour des éléments de la liste). Maintenant, découvrez pourquoi. Merci @jcollings pour la solution de contournement. J'espère que ce bug sera corrigé.

Salut,

Face au problème ci-dessous:

Problème:
Ion Item Sliding ne fonctionne que pour la première fois. Il cesse de répondre lorsque je glisse l'élément ionique, puis je vais sur une autre page et je reviens.

J'ai essayé le travail suggéré par @jcollings. J'ai essayé de fermer tous les éléments ioniques en glissant en quittant la vue comme suit:

ionViewWillLeave() {
    setTimeout(async() => {
      console.log('sliding list: ', this.slidingList);
      if(this.slidingList){
        await this.slidingList.closeSlidingItems();
      }
    },1000);
  }

mais n'a pas fonctionné.

Mon code de curseur est le suivant:

<ion-list #slidingList class="notifications" *ngIf="notificationCheck === 'true'">
    <ion-item-sliding *ngFor="let notification of notifications; index as i;">
      <ion-item lines="none" no-padding>
        <ion-row>
          <ion-col size="12" class="title">
            {{notification.title}}
          </ion-col>
          <ion-col size="12" class="description">
            {{notification.message}}
          </ion-col>
          <ion-col size="12" class="date-time">
            {{notification.createdDate | date:'medium'}}
          </ion-col>
          <i class="left-arrow"></i>
        </ion-row>
      </ion-item>
      <ion-item-options side="end">
        <ion-item-option color="secondary" (click)="goToURL(notification.actionURL)">
          <div slot="icon-only">
            <i class="fa fa-edit" *ngIf="notification.actionType === 'UPDATE'"></i>
            <i class="fa fa-eye" *ngIf="notification.actionType === 'VIEW'"></i>
          </div>
        </ion-item-option>
        <ion-item-option color="danger" (click)="deleteNotifications(notification.id)">
          <div slot="icon-only">
            <i class="fa fa-trash"></i>
          </div>
        </ion-item-option>
      </ion-item-options>
    </ion-item-sliding>
  </ion-list>

J'ai essayé avec la dernière version ionique 4.0.0-rc.0. Le problème existe toujours.

Salut,

J'ai essayé de jouer avec ce problème et j'ai constaté que dans mon cas, le coupable du fait que Ion Item Slider ne répondait plus était que chaque fois que la vue était modifiée, les options de glissement ne se fermaient pas. J'ai donc fait la chose suivante et cela a parfaitement fonctionné:

constructor(private location: Location,  private router: Router) {

    this.navigationSubscription = this.router.events.subscribe(async(e: any) => {
      if (e instanceof NavigationStart) {
        if(this.slidingList){
          await this.slidingList.closeSlidingItems();
        }
      }
    });

  }

Un grand merci à @jcollings.

J'ai donné ceci:
en .html

<ion-item-sliding #slidingItem>
<ion-item-option color="danger" (click)="del(slidingItem,carte)">Supprimer</ion-item-option>
in .ts
import {  IonItemSliding } from '@ionic/angular';

async del(slidingItem: IonItemSliding, carte){
    await slidingItem.close();
    let index = this.cartes.indexOf(carte);
        if(index > -1){
            this.cartes.splice(index, 1);
        }
}

marche parfaitement
Un grand merci à @jcollings.

Peut confirmer que le problème existe toujours avec 4.0.0-rc.0.

Peut également confirmer que cela existe dans la version 4.0.0-rc.1

Ce bogue existe toujours dans la version 4.0.0-rc.2.
J'utilise un ion-item-glissant à l'intérieur du virtual-scroll, donc je ne peux pas utiliser List.closeSlidingItems ().
Si je ne ferme pas un élément en glissant et quitte la vue en utilisant le bouton de retour ou quelque chose du genre, alors le glissement de l'élément cesse de fonctionner la prochaine fois. Je ne peux pas utiliser l'événement (clic) dans ce cas parce que j'ouvre le coulissant et que je pars. Il n'y a aucun changement pour attraper (clic) l'événement.

Une autre solution de contournement. Ça marche pour moi.

in .html
<ion-item-sliding>....</ion-item-sliding>

in .ts
import {  IonItemSliding } from '@ionic/angular';
  @ViewChild(IonItemSliding) itemSliding: IonItemSliding;
   ionViewWillLeave() {
        setTimeout(() => { this.itemSliding.closeOpened(); }, 500);
   }

Cher Brandy,

@brandyscarney pouvez-vous jeter un oeil? nous sommes en phase de migration vers la v4 et j'aimerais entendre l'opinion de l'équipe ionique. Cela me semble une question importante.

grand merci.
Norbert

Merci de m'avoir taguée! Je l'ai ajouté à notre tableau de projet pour l'examiner.

@manucorporat @mhartington @paulstelzer

Merci pour ce numéro! Cela a été fusionné par PR # 17492. Ce sera dans la prochaine version: 4.1.0 . Veuillez nous informer si vous rencontrez toujours des problèmes par la suite.

Merci pour le problème! Ce problème est verrouillé pour empêcher les commentaires qui ne sont pas pertinents pour le problème d'origine. Si le problème persiste avec la dernière version d'Ionic, veuillez créer un nouveau problème et vous assurer que le modèle est entièrement rempli.

Cette page vous a été utile?
0 / 5 - 0 notes