【Ionic4】ion-item-slidingでOptionsをタップした際にスライドを閉じたい場合は、`closeSlidingItems()`を使う。

## ドキュメントの`ion-item-sliding`だけ見て実装するとスライドが閉じない

例えばOptionsをEditボタンだとして、タップしたときにモーダルを開くようなUIを作るとする。
※ソースコードは大事なところだけ切り抜いてます。

``` html:list.page.html
<ion-content>
    <ion-list>
        <ion-item-sliding *ngFor="let book of bookList; let i = index">
            <ion-item>
                <ion-label class="ion-text-wrap" color="dark">{{book}}</ion-label>
            </ion-item>
            <ion-item-options>
                <ion-item-option color="medium" (click)="openEditModal(book)">
                    <ion-icon name="create"></ion-icon>
                    Edit
                </ion-item-option>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>
```

``` typescript:list.page.ts
    constructor(private modal: ModalController) { }

    public async openEditModal(book: string) {
        const m = await this.modal.create({
            component: ModifyModalComponent,
            componentProps: { book }
        });
        return await m.present();
    }
```

このままだと、モーダルを閉じたときにスライドのOptionsが開きっぱなしになる。
<img width="300px" alt="ionic-item-sliding" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316318/53501b6e-a79a-3e53-7010-5131eb7345bc.gif">

## `closeSlidingItems()`を使ってみる

まずは`ion-list`に変数を追加。

``` html:list.page.html
<ion-content>
    <ion-list #slidingList> <!-- ←追加 -->
        <ion-item-sliding *ngFor="let book of bookList; let i = index">
            <ion-item>
                <ion-label class="ion-text-wrap" color="dark">{{book}}</ion-label>
            </ion-item>
            <ion-item-options>
                <ion-item-option color="medium" (click)="openEditModal(book)">
                    <ion-icon name="create"></ion-icon>
                    Edit
                </ion-item-option>
            </ion-item-options>
        </ion-item-sliding>
    </ion-list>
</ion-content>
```

page(またはcomponent)のClassのプロパティに`@ViewChild`を追加。(ts-ignoreしないと怒られる)
そのあとモーダルを開く処理の中に、リスト内の`SlidingItem`を閉じるメソッド、`closeSlidingItems()`を呼び出す。
これでモーダルを開いたときにスライドが閉じるようになる。

``` typescript:list.page.ts

    // ↓ 追加
    // @ts-ignore
    @ViewChild('slidingList') slidingList;

    constructor(private modal: ModalController) { }

    public async openEditModal(book: string) {
        const m = await this.modal.create({
            component: ModifyModalComponent,
            componentProps: { book }
        });

        // ↓ 追加
        await this.slidingList.closeSlidingItems();
        return await m.present();
    }
```

<img width="300px" alt="ionic-item-sliding" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/316318/ef28fc7d-981f-bbe8-2d53-e6e633845b66.gif">

## 参考
[Sliding not working after empty an element in array - peterpeterparker commented](https://github.com/ionic-team/ionic/issues/15486#issuecomment-420025772)

## 余談
ドキュメントをよく見たら、`ion-list`のほうに書いてありました。
[ion-list #method](https://ionicframework.com/jp/docs/api/list#methods)
> If ion-item-sliding are used inside the list, this method closes any open sliding item.
> Returns true if an actual ion-item-sliding is closed

`ion-item-sliding`の方に書いてあるとかリンク貼ってあるとわかりやすいんだよなぁ…。