Question

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

我已经尝试过：

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

并在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复制了代码 ->结果相同

并使我的代码适应此示例。更改item-options的位置（从结束到开始）会更好一些（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>

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

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

1 个答案: