【发布时间】：2020-02-05 10:23:52
【问题描述】：
我有一个带有滑动项的离子列表，并使用 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复制了代码 -> 相同的结果
并将我的代码改编为这个例子。 更改 item-options 的位置（从头到尾）让它变得更好（70% 的时间需要点击两次）
看看这里：example on github
【问题讨论】：
-
考虑为您的问题提供minimal reproducible example，以便我们查看您的尝试并告诉您出了什么问题（如果有）。
-
没有。我试着像ionicframework.com/docs/api/item-sliding 上的文档说的那样只使用一个简单的离子项目滑动。我复制了代码并添加了一个函数“doSomething()”，其中只有一个控制台输出。结果相同。
-
我的意思是很难看到你的问题并知道它来自哪里而不能玩它。因此，如果您可以在 stackblitz.com 上提供 minimal reproducible example 来复制它，那么我可以找到导致问题的原因并为您提供解决方法。
-
ok :) stackblitz 不知道 ion-item-option 是什么......但我在 github 上准备了一个小项目：github.com/Sunny41/example.git 如果你玩一下滑动项目选项按钮，它会显示相同的行为...
标签： angular typescript ionic-framework ionic4 ion-item