Ionic-framework: [Ionic V4.0.0-beta.7] [deslizamento de item de íon] O deslizamento não funciona após esvaziar um elemento na matriz

Criado em 7 set. 2018  ·  30Comentários  ·  Fonte: ionic-team/ionic-framework

Relatório de erro

Informação Iônica
Execute ionic info de um prompt de terminal / cmd e cole a saída abaixo.

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

Descreva o bug
Eu criei uma matriz de 3 elementos e usei oe adiretiva para mostrar uma lista de itens deslizantes. Cada item tem um botão de remoção para remover o elemento de destino, mas depois de remover um elemento, o batente deslizante funciona para os itens restantes

Passos para reproduzir
Passos para reproduzir o comportamento:

  1. Vamos para '...'
  2. Clique em '....'
  3. Role para baixo até '....'
  4. Ver erro

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

Comportamento esperado
o deslizamento deve funcionar corretamente para cada item, mesmo após a remoção de um elemento

Contexto Adicional
Liste qualquer outra informação que seja relevante para o seu problema. Rastreamentos de pilha, problemas relacionados, sugestões sobre como corrigir, links do Stack Overflow, links do fórum, capturas de tela, sistema operacional, se aplicável, etc.

core bug

Comentários muito úteis

Também teve o mesmo problema, com uma lista dinâmica de elementos, excluindo um item com ocomponente e, em seguida, atualizar os elementos faz com que não seja capaz de excluir nenhum outro elemento até uma atualização.

Depois de pesquisar, notei que sem a atualização de elementos funcionou bem, olhando para os documentos, há um método para fechar todos os itens deslizantes no item ou na lista. usar isso corrigiu o problema.

  1. Dando à lista de íons um id #dynamicList
  2. Acessando essa lista pelo id @ViewChild('dynamicList') dynamicList;
  3. Ao clicar em <ion-item-option> acionando dynamicList.closeSlidingItems() antes de deletar o registro.

Espero que isso ajude entretanto, eu sou novo no angular, então espero que eu não esteja fazendo nada tão estúpido.

Todos 30 comentários

Eu tenho o mesmo problema.
A propósito, os itens deslizantes não funcionam após excluir um, é necessário recarregar o aplicativo

@ quynh-ng Estou com o mesmo problema, tive que fazer o downgrade para a versão beta.5 :(

Engraçado, acabei de pousar nesse problema também, pude confirmar, se eu excluir com uma ação em um item da lista deslizante, os itens restantes não poderiam mais ser deslizados

ps: em beta.8 também é o caso

@ quynh-ng mesmo -_-

Também teve o mesmo problema, com uma lista dinâmica de elementos, excluindo um item com ocomponente e, em seguida, atualizar os elementos faz com que não seja capaz de excluir nenhum outro elemento até uma atualização.

Depois de pesquisar, notei que sem a atualização de elementos funcionou bem, olhando para os documentos, há um método para fechar todos os itens deslizantes no item ou na lista. usar isso corrigiu o problema.

  1. Dando à lista de íons um id #dynamicList
  2. Acessando essa lista pelo id @ViewChild('dynamicList') dynamicList;
  3. Ao clicar em <ion-item-option> acionando dynamicList.closeSlidingItems() antes de deletar o registro.

Espero que isso ajude entretanto, eu sou novo no angular, então espero que eu não esteja fazendo nada tão estúpido.

nem todos os heróis usam capas, obrigado @jcollings pela solução!

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 bem, mas é uma solução ou uma solução alternativa?

@ Anthony2539 provavelmente um pouco de ambos: stick_out_tongue_winking_eye:

Não sei se é uma solicitação de recurso ou um bug

Alguns commits sobre deslizamentos foram feitos recentemente, eu acho, então talvez o problema seja / vá desaparecer

De qualquer forma, digamos que a solução alternativa funcione e não arme meu aplicativo, eu acho

Eu diria que é mais um bug, já que tive que fazer o downgrade para que meus testes e2e passassem novamente

Esse problema é obviamente um bug. Remova um item não deve ser necessário fechá-lo antes de excluí-lo, é engraçado.

Descobri que outra solução alternativa é passar a referência ao ItemSliding para o método delete e, em seguida, apenas fechar esse item antes de excluir o item da 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 Muito obrigado por resolver meu problema perfeitamente.

não funciona para mim !!!

A solução alternativa não funciona para mim, com ou sem chamar os métodos close ou closeSlidingItems .
O que percebi é: depois de ocultar e mostrar o item novamente, deslizar não _parece_ funcionar, mas se você tentar deslizar um item e clicar onde o botão _deve_ estar, pode realmente acionar a ação do botão.
Aqui está um exemplo de Stackblitz .
No Stackblitz, estou usando @ionic/[email protected] , mas o problema também está lá com @ionic/[email protected] em minha máquina local.

@bockoblur : Eu verifiquei seu exemplo Stackblitz e brinquei com ele um pouco. Se você realmente excluir os itens da lista, a solução alternativa parece funcionar bem. Se eles estiverem apenas ocultos e depois exibidos novamente, o comportamento será exatamente como você descreveu. Este parece ser um problema com o transform: translate não sendo aplicado corretamente ao elemento de item da lista. Talvez o componente ItemSliding ainda use a referência DOM antiga para traduzir o item. Você pode encontrar meu exemplo modificado aqui: https://stackblitz.com/edit/ionic-4-item-sliding-show-hide-error-zxgbmf

Obrigado por investigar isso. Funciona bem.
No entanto, este ainda é um problema que precisa ser tratado pela equipe iônica ...

A solução alternativa @ mimacom-klier funciona para mim no Ionic (4.5.0) mais recente.

EDITAR: Usar a solução @jcollings funciona adicionalmente para adicionar e / ou atualizar um item, o que causou o mesmo problema para mim. Obrigado!

Esta solução funciona para mim usando:
Ionic CLI: 4.5.0
Estrutura Iônica: @ iônica / angular 4.0.0-beta.17

No entanto, acredito que este ainda é um problema que deve ser corrigido, duvido que qualquer desenvolvedor espere esse comportamento.

O mesmo para mim. Shmorkaround de solução alternativa. O principal é que me tira de um grande buraco e sou grato a @jcollings por isso

Wauw .. estava pensando nisso o dia todo (o slide também não funcionou depois de atualizar os itens da lista). Agora descubra o porquê. Thankx @jcollings pela solução alternativa. Espero que este bug seja corrigido.

Oi,

Enfrentando o problema abaixo:

Questão:
O deslizamento de itens de íons funciona apenas na primeira vez. Ele para de responder quando eu deslizo o item de íon, em seguida, vou para outra página e volto.

Tentei a solução sugerida por @jcollings. Tentei fechar todos os itens de íon deslizando ao sair da visualização da seguinte forma:

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

mas não funcionou.

Meu código deslizante é o seguinte:

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

Tentei com a última versão ionic 4.0.0-rc.0. O problema ainda existe.

Oi,

Tentei brincar com esse problema e descobri que, no meu caso, o culpado pelo fato de o Ion Item Slider não responder era que sempre que a visualização era alterada, as opções de deslizamento não fechavam. Então eu fiz o seguinte e funcionou perfeitamente:

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

  }

Muito obrigado a @jcollings.

Eu fiz isto:
em .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 perfeitamente
Muito obrigado a @jcollings.

Pode confirmar se o problema ainda existe com 4.0.0-rc.0.

Pode confirmar que isso existe no 4.0.0-rc.1 também

Este bug ainda existe no 4.0.0-rc.2.
Eu uso um deslizamento de item de íon dentro de rolagem virtual, então não posso usar List.closeSlidingItems ().
Se eu não fechar um item deslizando e sair da visualização usando o botão Voltar ou algo assim, o deslizamento do item parará de funcionar da próxima vez. Não posso usar o evento (clique) neste caso porque abro o deslizamento e saio. Não há alteração para capturar (clicar) o evento.

Outra solução alternativa. Funciona para mim.

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

Caro Brandy,

@brandyscarney pode dar uma olhada? estamos em fase de migração para v4 e gostaria de ouvir a opinião da equipe iônica. Me parece uma questão importante.

muito obrigado.
Norbert

Obrigado por me marcar! Eu o adicionei ao nosso painel de projeto para examinar.

@manucorporat @mhartington @paulstelzer

Obrigado por este problema! Isso foi incorporado pelo PR # 17492. Estará no próximo lançamento: 4.1.0 . Informe-nos se você ainda tiver problemas depois disso.

Obrigado pelo problema! Este problema está sendo bloqueado para evitar comentários que não são relevantes ao problema original. Se isso ainda for um problema com a versão mais recente do Ionic, crie um novo problema e verifique se o modelo está totalmente preenchido.

Esta página foi útil?
0 / 5 - 0 avaliações