Ion-item-option 按钮需要点击两次

Question

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

我已经试过了：

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

并在 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% 的时间需要点击两次）

看这里：example on 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 文件才能正常工作。我删除了它并且它工作正常。愚蠢的东西。

Ion-item-option 按钮需要点击两次

Ion-item-option button needs to be clicked twice

angular

typescript

ionic-framework

ionic4

ion-item