ionic 4：<ion-reorder>无法按预期工作

Question

我正在使用ionic 4 angular7。我正在<ion-reorder>重新排序列表。Drag n Drop第一次可以正常工作，但是当我释放时click，项目卡住了。第一次重新排序后，所有内容都会冻结。而且我无法第二次尝试重新订购。

这是我的.html文件

<ion-list lines="none">
      <ion-reorder-group disabled="false">
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
        <ion-reorder>
          <ion-item>
            <ion-thumbnail no-margin item-start>
              <img src="../assets/images/5.jpg">
            </ion-thumbnail>
            <div class="pl-2">
              <h5 no-margin>Multan</h5>
              <p no-margin>Historical place...</p>
            </div>
            <ion-buttons slot="end">
              <ion-button>
                <ion-icon slot="icon-only" name="close"></ion-icon>
              </ion-button>
            </ion-buttons>
          </ion-item>
        </ion-reorder>
      </ion-reorder-group>
    </ion-list>

当我拖动n Drop Item时。我放下它时会卡住。此后，一切都冻结了。

任何帮助...？

我正在使用

离子性：4.10.2角度：7.3.0

Answer 1

我认为您需要将数据存储在变量中，并在这些数据上使用ngFor来构建您的重新排序商品。

this.items: Array<img: string; title: string; description: string; icon: 
string> = [yourArrayOfObjects];

我认为那么您需要捕获ionItemReorder事件，例如

<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">

在您的.ts中，reorderItems（）函数可能是

reorderItems(ev) {
    const itemMove = this.items.splice(ev.detail.from, 1)[0];
    this.items.splice(ev.detail.to, 0, itemMove);
    ev.detail.complete();
}