离子项目选项按钮需要单击两次

Question

我有一个离子列表，其中包含滑动项目，并使用 for 循环创建它们。您可以单击该项目本身，路由器会导航到另一个页面。当您滑动某个项目时，会显示一个按钮。并且此按钮需要单击两次（90% 的时间）才能触发。

我已经尝试过：

（单击）<ion-item>和 标签<ion-avatar>。相同的行为:(我让用户创建一个项目并将其添加到一个列表中。该列表使用 this.storage.set('list'); 存储在离子存储中，并且离子列表是从上面的列表创建的.到目前为止，这不会造成任何问题。并且列表项的数量也不会影响行为。离子列表位于 a 中，<div *ngIf = "loaded">并且加载稍后设置为 false deleteHorse()，因此这不会影响任何内容。当我单击离子项目本身，它的行为正确。是否该项目覆盖了离子项目选项，因此，第二次单击是通过单击实际按钮而不是项目来实现的？我尝试添加带有滑动选项的硬编码项目 - 同样的事情......

并将其报告给github上的 ionic

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

仍然没有解决方案，但更好...

编辑：首先使用 Ionic 4，ShadowDOM 出现了这个奇怪的问题，我必须用“host { }”包装整个 CSS 文件才能正常工作。我删除了这个并且它工作正常。愚蠢的东西。