Кнопка выбора ионного элемента должна быть нажата дважды

Question

У меня есть список ионов со скользящими элементами, и я создаю их с помощью цикла for. Вы можете щелкнуть сам элемент, и маршрутизатор перейдет на другую страницу. Когда вы перемещаете элемент, открывается кнопка. и эту кнопку нужно нажать дважды (в 90% случаев), чтобы сработать.

Я уже пробовал:

(щелкните) в <ion-item> и <ion-avatar>теги. Такое же поведение:(Я разрешаю пользователю создать элемент, и он добавлен в список. Этот список хранится в ионном хранилище с помощью this.storage.set('list'); и ion-list создается из этого списка выше. пока все хорошо, это не вызывает никаких проблем. и количество элементов списка также не влияет на поведение. ion-list находится в<div *ngIf = "loaded"> и загружено устанавливается false позже в deleteHorse()так что это не должно ни на что повлиять. когда я нажимаю на сам ионный элемент, он ведет себя правильно. Может ли быть, что элемент покрывает параметры ion-item, и, таким образом, второй щелчок осуществляется как щелчок по фактической кнопке, а не по элементу? Я попытался добавить жестко запрограммированный элемент со скользящими параметрами - то же самое...

и сообщил об этом в ionic на github

<div *ngIf="loaded">
<ion-list *ngFor="let item of items; let i = index" routerDirection="forward">
      <ion-item-sliding #slidingItem (click)="dosomething()">
        <ion-item >
        <ion-avatar>
          <img [src]=items[0].imgUrl>
        </ion-avatar>
        <h2>{{item[0].name}}</h2>
      </ion-item>
      <ion-item-options side="end">
          <ion-item-option (click)="showSureAlert(i, slidingItem)">
            <ion-button class="slideButton" >
              <ion-icon name="trash"></ion-icon>
            </ion-button>
          </ion-item-option>
        </ion-item-options>
      </ion-item-sliding>
    </ion-list>
</div>

async showSureAlert(index, item) {
    console.log('clicked');
    const text: any = [];
    const alert = await this.alertCtrl.create({
      header: text.header = this.translateService.instant('delete'),
      message: text.message = this.translateService.instant('Warning.deleteHorse') + ' ' + this.horses[index][0].name + '?',
      buttons: [
        {
          text: text.next = this.translateService.instant('no'),
          handler: () => {

          }
        },
        {
          text: text.next = this.translateService.instant('yes'),
          handler: () => {
            // delete horsename
            this.deleteHorse(index);
          }
        }
      ],
      backdropDismiss: false
    });
    console.log('alert created');
    await alert.present();
    item.close();
  }

В console.log() это тоже влияет.

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

редактировать

Я скопировал код с ionicframework.com-> тот же результат

И адаптировал свой код к этому примеру. Изменение положения параметров элемента (от конца к началу) сделало его немного лучше (в 70% случаев его нужно щелкнуть дважды)

посмотрите здесь: пример на github

Answer 1

Я нашел улучшение. но это не делает свою работу надежно. Первые 3-4 раза срабатывает всего одним щелчком. после этого мне нужно дважды щелкнуть.

и выглядит чертовски уродливо:D

Кнопки в опции ion-item вызывают проблему. так что сначала у меня было:

 <ion-item-options side="end">
          <ion-item-option (click)="showSureAlert(i, slidingItem)">
            <ion-button class="slideButton" >
              <ion-icon name="trash"></ion-icon>
            </ion-button>
          </ion-item-option>
        </ion-item-options>

и сейчас:

<ion-item-options side="end">
          <ion-item-option (click)="showSureAlert(i, slidingItem)">
              <ion-icon name="trash"></ion-icon>
          </ion-item-option>
        </ion-item-options>

все еще нет решения, но лучше...

edit: сначала с Ionic 4 была эта странная проблема с ShadowDOM, и мне пришлось обернуть весь мой файл CSS с помощью "host { }", чтобы работать правильно. Я удалил это, и он работает нормально. глупость.