#はじめに
【Ionic + Firebaseでアプリ開発】お気に入り登録機能を実装するの補足記事です。
ion-item-slidingでアイテムのスライドを実装すると、以下のようにion-item-optionをタップした際にスライドが開いたままになっていました。
#解決策
#slidingItem
とslidingItem.close()
を追加。
/app/home/home.page.html
<ion-header [translucent]="true">
<ion-toolbar>
<ion-title>
記事一覧
</ion-title>
<ion-button (click)="presentFavorite()" slot="end">
<ion-icon name="star-outline"></ion-icon>
</ion-button>
</ion-toolbar>
</ion-header>
<ion-content [fullscreen]="true">
<ion-card *ngFor="let trick of groundtricks" class="activated">
<ion-item-sliding #slidingItem>
<ion-item (click)="openPage(trick.url)" class="activated">
<ion-card-header>
<ion-img src = "{{trick.image}}" class="image"></ion-img>
</ion-card-header>
<ion-card-content>
<p><font size="2">レベル:{{ trick.level }}</font></p><br>
<p><font size="3" color="#000000">{{ trick.name }}</font></p>
</ion-card-content>
</ion-item>
<ion-item-options side="start">
<ion-item-option (click)="favorite(trick); slidingItem.close()"><ion-icon size="large" name="star-outline"></ion-icon></ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-card>
</ion-content>
様々な方法を試しましたが、htmlのみ修正してタップした際にスライドが閉じるようにできました。
#参考
https://stackoverflow.com/questions/48011634/ionic-3-close-ion-item-sliding