angular - Ion-item-option knapp måste klickas två gånger

Jag har en ion-lista med svepbara objekt i den och skapar dessa med en for-loop. Du kan klicka på själva objektet och routern navigerar till en annan sida. När du sveper ett objekt avslöjas en knapp, och denna knapp måste klickas två gånger (i 90% av fallen) för att aktiveras.

Jag har redan försökt:

(klicka) i <ion-item> och <ion-avatar> taggarna. Samma beteende :( Jag låter användaren skapa ett objekt och det läggs till i en lista. Denna lista lagras i Ionic storage med this.storage.set('list'); och ion-list skapas från denna lista ovan. Hittills går allt bra, detta orsakar inga problem. Och antalet objekt i listan påverkar inte heller beteendet. ion-list finns i <div *ngIf="loaded"> och loaded sätts till false senare i deleteHorse() så detta borde inte påverka något. När jag klickar på själva ion-item, fungerar det korrekt. Kan det vara så att objektet täcker ion-item-options och därför registreras det andra klicket som ett klick på den faktiska knappen och inte på objektet? Jag försökte lägga till ett hårdkodat objekt med sliding options - samma sak...

och rapporterade det till Ionic på 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();
  }

Även console.log() påverkas av detta.

Jag skulle verkligen vilja använda detta men om det inte finns någon lösning måste jag hitta något annat... tack på förhand för din hjälp.

redigera

Jag kopierade koden från ionicframework.com -> samma resultat

Och anpassade min kod till detta exempel. Att ändra positionen på artikelalternativen (från slutet till början) gjorde det lite bättre (70 % av gångerna behöver det klickas två gånger)

ta en titt här: exempel på github

Svar #1

Jag har hittat en förbättring, men detta gör inte sitt jobb pålitligt. De första 3-4 gångerna fungerar det med bara ett klick. Efter det måste jag klicka två gånger.

och det ser för jävligt ut :D

Knappar i ett ion-item-alternativ orsakar problemet. Så först hade jag:

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

och nu:

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

fortfarande ingen lösning, men bättre...

redigera: först med Ionic 4 fanns det detta konstiga problem med ShadowDOM och jag var tvungen att omsluta hela min CSS-fil med "host { }" för att det skulle fungera korrekt. Jag tog bort detta och det fungerar bra. Dum sak.

Relaterade artiklar