Ionic-framework: [Ionic V4.0.0-beta.7] [ion-item-slip] Скольжение не работает после опустошения элемента в массиве

Созданный на 7 сент. 2018  ·  30Комментарии  ·  Источник: ionic-team/ionic-framework

Сообщение об ошибке

Ионная информация
Запустите ionic info из командной строки терминала / cmd и вставьте результат ниже.

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

Опишите ошибку
Я создал массив из 3 элементов и использовалидиректива для отображения списка скользящего элемента. Каждый элемент имеет кнопку удаления для удаления целевого элемента, но после удаления одного элемента ползунок перестает работать для остальных элементов.

Действия по воспроизведению
Шаги по воспроизведению поведения:

  1. Идти к '...'
  2. Нажмите на '....'
  3. Прокрутите вниз до "...."
  4. Увидеть ошибку

Связанный код

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

Ожидаемое поведение
Предполагается, что скольжение работает правильно для каждого элемента даже после удаления элемента

Дополнительный контекст
Перечислите любую другую информацию, имеющую отношение к вашей проблеме. Следы стека, связанные проблемы, предложения по исправлению, ссылки на переполнение стека, ссылки на форумы, снимки экрана, ОС, если применимо, и т. Д.

core bug

Самый полезный комментарий

Также была такая же проблема с динамическим списком элементов при удалении элемента скомпонент, то при обновлении элементов он не сможет удалить какие-либо другие элементы до обновления.

Покопавшись, я заметил, что без обновления элементов все работает нормально, глядя на документы, есть способ закрыть все скользящие элементы в элементе или в списке. использование этого устранило проблему.

  1. Присвоение ионному списку идентификатора #dynamicList
  2. Доступ к этому списку по идентификатору @ViewChild('dynamicList') dynamicList;
  3. При нажатии <ion-item-option> запускается dynamicList.closeSlidingItems() перед удалением записи.

Надеюсь, это поможет тем временем, я новичок в angular, поэтому, надеюсь, я не делаю ничего такого глупого.

Все 30 Комментарий

У меня такая же проблема.
Кстати, после удаления скользящие элементы не работают, необходимо перезагрузить приложение.

@ quynh-ng У меня такая же проблема, мне пришлось перейти на бета-версию.5 :(

Забавно, только что столкнулся с этой проблемой, может подтвердить, что если я удалю с помощью действия над элементом скользящего списка, оставшиеся элементы больше не будут перемещаться

ps: в beta.8 тоже так

@ quynh-ng то же самое -_-

Также была такая же проблема с динамическим списком элементов при удалении элемента скомпонент, то при обновлении элементов он не сможет удалить какие-либо другие элементы до обновления.

Покопавшись, я заметил, что без обновления элементов все работает нормально, глядя на документы, есть способ закрыть все скользящие элементы в элементе или в списке. использование этого устранило проблему.

  1. Присвоение ионному списку идентификатора #dynamicList
  2. Доступ к этому списку по идентификатору @ViewChild('dynamicList') dynamicList;
  3. При нажатии <ion-item-option> запускается dynamicList.closeSlidingItems() перед удалением записи.

Надеюсь, это поможет тем временем, я новичок в angular, поэтому, надеюсь, я не делаю ничего такого глупого.

не все герои носят плащи ,

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 работает нормально, но это решение или обходной путь?

@ Anthony2539, наверное, и то, и другое: stuck_out_tongue_winking_eye:

Я не знаю, это запрос функции или ошибка

Я думаю, что недавно были сделаны некоторые фиксации в отношении скольжения, поэтому, возможно, проблема исчезнет / исчезнет

Во всяком случае, допустим, что обходной путь работает и, я думаю, мое приложение не активируется.

Я бы сказал, что это скорее ошибка, так как мне пришлось перейти на более раннюю версию, чтобы мои тесты e2e снова прошли

Очевидно, что это ошибка. Удалять элемент не нужно, перед удалением его закрывать, смешно.

Я обнаружил, что еще один обходной путь - передать ссылку на ItemSliding методу удаления, а затем просто закрыть этот элемент перед удалением элемента списка:

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 Большое спасибо за отличное решение моей проблемы.

у меня не работает !!!

У меня не работает обходной путь, с вызовом или без вызова методов close или closeSlidingItems .
Я заметил следующее: после того, как я скрываю, а затем снова показываю элемент, скольжение не _представляет_ работу, но если вы попытаетесь сдвинуть элемент, а затем щелкнете там, где должна быть кнопка, вы действительно можете запустить действие кнопки.
Вот пример Stackblitz .
В Stackblitz я использую @ionic/[email protected] , но проблема также существует с @ionic/[email protected] на моем локальном компьютере.

@bockoblur : Я проверил ваш пример Stackblitz и немного поиграл с ним. Если вы действительно удалите элементы из списка, обходной путь, похоже, работает нормально. Если они просто скрыты, а затем показаны снова, поведение будет точно таким, как вы описали. Похоже, это проблема с преобразованием: translate неправильно применяется к элементу элемента списка. Возможно, компонент ItemSliding все еще использует старую ссылку DOM для перевода элемента. Вы можете найти мой измененный пример здесь: https://stackblitz.com/edit/ionic-4-item-sliding-show-hide-error-zxgbmf

Спасибо, что изучили это. Работает нормально.
Тем не менее, это все еще проблема, которую необходимо решить ионной команде ...

Обходной путь @ mimacom-klier у меня работает на последней версии Ionic (4.5.0).

РЕДАКТИРОВАТЬ: использование решения @jcollings дополнительно работает для добавления и / или обновления элемента, что вызвало у меня ту же проблему. Спасибо!

Это решение работает для меня, используя:
Ионный интерфейс командной строки: 4.5.0
Ionic Framework: @ ionic / angular 4.0.0-beta.17

Однако я считаю, что это все еще проблема, которую следует исправить, и я сомневаюсь, что какой-либо разработчик ожидал такого поведения.

Мне то же. Временное решение проблемы. Главное, вытаскивает меня из большой дыры, и я благодарен @jcollings за это

Уау ... весь день обдумывал мою голову (к тому же слайд не работал после обновления элементов списка). Теперь выяснил почему. Спасибо x @jcollings за обходной путь. Надеюсь, эта ошибка будет исправлена.

Привет,

Столкнувшись с проблемой ниже:

Проблема:
Ion Item Sliding работает только в первый раз. Он перестает отвечать, когда я передвигаю ионный элемент, затем перехожу на другую страницу и возвращаюсь.

Пробовал работу, предложенную @jcollings. Пытался закрыть все скольжения ионных элементов при выходе из представления следующим образом:

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

но не сработало.

Мой код слайдера выглядит следующим образом:

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

Пробовали с последней версией ionic 4.0.0-rc.0. Проблема все еще существует.

Привет,

Попытался поиграть с этой проблемой и обнаружил, что в моем случае виновник того, что Ion Item Slider перестал отвечать, заключался в том, что всякий раз, когда менялось представление, скользящие параметры не закрывались. Итак, я сделал следующее, и оно отлично сработало:

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

  }

Большое спасибо @jcollings.

Я сделал это:
в .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);
        }
}

отлично работает
Большое спасибо @jcollings.

Можно подтвердить, что проблема все еще существует с 4.0.0-rc.0.

Могу подтвердить, что это также существует в 4.0.0-rc.1

Эта ошибка все еще существует в 4.0.0-rc.2.
Я использую скользящий элемент ion-item внутри virtual-scroll, поэтому я не могу использовать List.closeSlidingItems ().
Если я не закрываю сдвиг элемента и не выхожу из вида с помощью кнопки «Назад» или чего-то еще, то в следующий раз сдвиг элемента перестанет работать. Я не могу использовать событие (щелчок) в этом случае, потому что я открываю слайд и просто ухожу. Нет никаких изменений для перехвата (щелчка) события.

Другой способ обхода. Меня устраивает.

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

Дорогой бренди,

@brandyscarney, можешь взглянуть? мы находимся на этапе перехода на v4, и я хотел бы услышать мнение команды ionic. Смотрится мне важный вопрос.

Большое спасибо.
Норберт

Спасибо, что отметили меня! Я добавил его на нашу доску проекта, чтобы изучить.

@manucorporat @mhartington @paulstelzer

Спасибо за этот вопрос! Это было добавлено PR № 17492. Он будет в следующем выпуске: 4.1.0 . Сообщите нам, если после этого проблемы по-прежнему возникают.

Спасибо за вопрос! Эта проблема заблокирована, чтобы предотвратить комментарии, не относящиеся к исходной проблеме. Если это все еще проблема с последней версией Ionic, создайте новую проблему и убедитесь, что шаблон полностью заполнен.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги