Ionic-framework: [Ionic V4.0.0-beta.7] [ion-item-slide] El deslizamiento no funciona después de vaciar un elemento en la matriz

Creado en 7 sept. 2018  ·  30Comentarios  ·  Fuente: ionic-team/ionic-framework

Informe de error

Información iónica
Ejecute ionic info desde un indicador de terminal / cmd y pegue el resultado a continuación.

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 el error
Creé una matriz de 3 elementos y usé ely eldirectiva para mostrar una lista de elementos deslizantes. Cada elemento tiene un botón de eliminación para eliminar el elemento de destino, pero después de eliminar un elemento, el deslizamiento deja de funcionar para los elementos restantes

Pasos para reproducir
Pasos para reproducir el comportamiento:

  1. Ir '...'
  2. Haga clic en '....'
  3. Desplácese hacia abajo hasta '....'
  4. Ver error

Código relacionado

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

Comportamiento esperado
Se supone que el deslizamiento funciona correctamente para cada elemento incluso después de quitar un elemento.

Contexto adicional
Enumere cualquier otra información que sea relevante para su problema. Seguimiento de pila, problemas relacionados, sugerencias sobre cómo solucionarlo, enlaces de Stack Overflow, enlaces de foros, capturas de pantalla, sistema operativo si corresponde, etc.

core bug

Comentario más útil

También tuve el mismo problema, con una lista dinámica de elementos, al eliminar un elemento con elcomponente, luego actualizar los elementos hace que no pueda eliminar ningún otro elemento hasta que se actualice.

Después de investigar, noté que sin la actualización de elementos funcionó bien, mirando los documentos hay un método para cerrar todos los elementos deslizantes en el elemento o en la lista. usar esto solucionó el problema.

  1. Darle a la lista de iones una identificación #dynamicList
  2. Accediendo a esa lista por el id @ViewChild('dynamicList') dynamicList;
  3. Al hacer clic en <ion-item-option> activa dynamicList.closeSlidingItems() antes de eliminar el registro.

Espero que esto ayude mientras tanto, soy nuevo en angular, así que espero no estar haciendo nada tan estúpido.

Todos 30 comentarios

Tengo el mismo problema.
Por cierto, los elementos deslizantes no funcionan después de eliminar uno, es necesario volver a cargar la aplicación

@ quynh-ng Tengo el mismo problema, he tenido que cambiar a beta.5 :(

Es gracioso, acabo de aterrizar en ese problema también, podría confirmar, si elimino con una acción en el elemento de la lista deslizante, los elementos restantes ya no se podrían deslizar

ps: en beta.8 también es el caso

@ quynh-ng mismo -_-

También tuve el mismo problema, con una lista dinámica de elementos, al eliminar un elemento con elcomponente, luego actualizar los elementos hace que no pueda eliminar ningún otro elemento hasta que se actualice.

Después de investigar, noté que sin la actualización de elementos funcionó bien, mirando los documentos hay un método para cerrar todos los elementos deslizantes en el elemento o en la lista. usar esto solucionó el problema.

  1. Darle a la lista de iones una identificación #dynamicList
  2. Accediendo a esa lista por el id @ViewChild('dynamicList') dynamicList;
  3. Al hacer clic en <ion-item-option> activa dynamicList.closeSlidingItems() antes de eliminar el registro.

Espero que esto ayude mientras tanto, soy nuevo en angular, así que espero no estar haciendo nada tan estúpido.

no todos los héroes usan capas, ¡gracias @jcollings por la solución!

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 funciona bien, pero ¿es una solución o una solución alternativa?

@ Anthony2539 probablemente un poco de ambos: atascado_out_tongue_winking_eye:

No sé si es una solicitud de función o un error

Creo que recientemente se han realizado algunos compromisos con respecto a deslizamientos, por lo que tal vez el problema sea / desaparecerá

De todos modos, digamos que la solución funciona y supongo que no armará mi aplicación

Diría que es más un error ya que tuve que degradar para que mis pruebas e2e volvieran a pasar

Este problema es obviamente un error. Eliminar un elemento no debería necesitar cerrarlo antes de eliminarlo, es gracioso.

Descubrí que otra solución es pasar la referencia a ItemSliding al método de eliminación y luego simplemente cerrar ese elemento antes de eliminar el elemento de la lista:

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 Muchas gracias por resolver mi problema a la perfección.

no funciona para mi !!!

La solución alternativa no funciona para mí, con o sin llamar a los métodos close o closeSlidingItems .
Lo que noté es: después de ocultar y luego mostrar el elemento nuevamente, deslizar no parece funcionar, pero si intentas deslizar un elemento y luego haces clic donde el botón _debería estar, puedes activar la acción del botón.
Aquí hay un ejemplo de Stackblitz .
En Stackblitz, estoy usando @ionic/[email protected] , pero el problema también está ahí con @ionic/[email protected] en mi máquina local.

Gracias por mirar en esto. Funciona bien.
Sin embargo, este sigue siendo un problema que debe ser abordado por el equipo iónico ...

La solución de @ mimacom-klier me funciona en la última versión de Ionic (4.5.0).

EDITAR: El uso de la solución @jcollings también funciona para agregar y / o actualizar un elemento, lo que me causó el mismo problema. ¡Gracias!

Esta solución funciona para mí usando:
CLI iónico: 4.5.0
Marco iónico: @ ionic / angular 4.0.0-beta.17

Sin embargo, creo que esto sigue siendo un problema que debería solucionarse, dudo que ningún desarrollador espere este comportamiento.

Lo mismo para mi. Solución alternativa. Lo principal es que me saca de un gran agujero y estoy agradecido con @jcollings por eso.

Wauw ... estaba envolviendo mi cabeza todo el día sobre esto (también la diapositiva no funcionaba después de actualizar los elementos de la lista). Ahora averigüe por qué. Thankx @jcollings por la solución. Espero que este error se solucione.

Hola,

Frente al problema siguiente:

Problema:
Ion Item Sliding funciona solo por primera vez. Deja de responder cuando deslizo el elemento de iones, luego voy a otra página y regreso.

Probé el trabajo sugerido por @jcollings. Intenté cerrar todos los elementos de iones deslizantes al salir de la vista de la siguiente manera:

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

pero no funcionó.

Mi código deslizante es el siguiente:

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

Lo he probado con la última versión iónica 4.0.0-rc.0. El problema aún existe.

Hola,

Intenté jugar con este problema y descubrí que, en mi caso, el culpable de que Ion Item Slider no respondiera fue que cada vez que se cambiaba la vista, las opciones de deslizamiento no se cerraban. Así que hice lo siguiente y funcionó perfectamente:

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

  }

Muchas gracias a @jcollings.

Me he puesto esto:
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);
        }
}

funciona perfectamente
Muchas gracias a @jcollings.

Puede confirmar que el problema persiste con 4.0.0-rc.0.

Puede confirmar que esto también existe en 4.0.0-rc.1

Este error todavía existe en 4.0.0-rc.2.
Uso un desplazamiento de elementos de iones dentro de un desplazamiento virtual, por lo que no puedo usar List.closeSlidingItems ().
Si no cierro un elemento deslizante y salgo de la vista con el botón Atrás o algo así, entonces el elemento deslizante dejará de funcionar la próxima vez. No puedo usar el evento (clic) en este caso porque abro la barra deslizante y me voy. No hay ningún cambio en el evento de captura (clic).

Otra solución. Esto funciona para mi.

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

Estimado Brandy,

@brandyscarney ¿puedes echar un vistazo? Estamos en la fase de migración a la v4 y me gustaría escuchar la opinión del equipo iónico. Me parece un tema importante.

muchas gracias.
Norberto

¡Gracias por etiquetarme! Lo agregué a nuestro tablero de proyecto para analizarlo.

@manucorporat @mhartington @paulstelzer

¡Gracias por este problema! Esto se ha fusionado con PR # 17492. Estará en la próxima versión: 4.1.0 . Háganos saber si sigue teniendo problemas después de eso.

¡Gracias por el problema! Este problema se bloquea para evitar comentarios que no sean relevantes para el problema original. Si esto sigue siendo un problema con la última versión de Ionic, cree un nuevo problema y asegúrese de que la plantilla esté completa.

¿Fue útil esta página
0 / 5 - 0 calificaciones