离子 4：<ion-reorder> 未按预期工作答案

【问题标题】：ionic 4: <ion-reorder> not working as expected离子 4：<ion-reorder> 未按预期工作
【发布时间】：2019-07-01 05:19:42
【问题描述】：

我正在使用 ionic 4 angular 7。我正在使用 <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

【问题讨论】：

抱歉@PeterHaddad 链接似乎已损坏。

标签： ionic-framework angular7 ionic4 reorderlist

【解决方案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();
}

【讨论】：

谢谢。这对我有用。尽管根据离子文档，这应该与一个语句一起使用：this.items = ev.detail.complete(this.items);但它不起作用。
您可以在 typescript 中为事件添加类型上下文：import { ItemReorderEventDetail } from '@ionic/core';reorderItems(ev: CustomEvent<ItemReorderEventDetail>);
我错过了“完整”通话。谢谢

【解决方案2】：

这里的关键是完成事件，你必须手动完成。所以ionItemReorder事件回调是必须的。所以像这样简单的事情应该可以解决问题：

打字稿：

    public onItemReorder({ detail }) {
       detail.complete(true);
    }

HTML：

<ion-reorder-group (ionItemReorder)="onItemReorder($event)" [disabled]="false">

【讨论】：

【解决方案3】：

ionic4 版本：

html代码：

<ion-content>
  <ion-list>
        <ion-list-header>
            <ion-label>INCLUDE</ion-label>
        </ion-list-header>
        <ion-reorder-group (ionItemReorder)="reorder($event)" [disabled]="false">
            <ion-item *ngFor="let accessory of accessories">
                <ion-label>{{accessory}}</ion-label>
                <ion-reorder></ion-reorder>
            </ion-item>
        </ion-reorder-group>
   </ion-list>
</ion-content>

打字稿代码：

accessories = ['test', 'test1', 'test2'];

reorder(event) {
        const itemToMove = this.accessories.splice(event.detail.from, 1)[0];
        this.accessories.splice(event.detail.to, 0, itemToMove);
}

这永远不会抛出任何类型的错误，它有效。我 100% 确定，已经使用了 3-4 次。希望对你也有帮助。

【讨论】：

这需要在最终拼接后的event.accessories.complete();

【解决方案4】：

  <ion-list >
              <ion-item-group (ionItemReorder)="reorder($event)"  reorder='true' >
                <ion-item *ngFor="let item of file_uri" (click)="openSubMenu(item.bunch)" style="background-color: #F0F0F0">
                <ion-avatar item-left >
                  <img src="assets/{{item.bunch}}.svg">
                </ion-avatar>  

                  <h2 color="primary_secound">{{item.bunch}}
                  </h2>
                  <p>Click To See Menu of {{item.bunch}} 
                  </p>

                  <ion-icon name="arrow-dropright" item-right></ion-icon>

                </ion-item>
              </ion-item-group>
              </ion-list> 
reorder(event) {
        const itemToMove = this.file_uri.splice(event.from, 1)[0];
        this.file_uri.splice(event.to, 0, itemToMove);
    }

【讨论】：

尝试添加一些关于您的答案的描述。它将帮助其他人轻松捕获您的代码。

【解决方案5】：

使用 Angular - 离子 - 打字稿

在 HTML 文件/代码中：

<ion-reorder-group (ionItemReorder)="reorderItems($event)" disabled="false">
    <ion-item *ngFor="let item of yourArray">
         <ion-label> {{ item.name }} </ion-label>
         <ion-reorder slot="end"></ion-reorder>
    </ion-item>
</ion-reorder-group>

控制器或 .ts 代码：

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

按照上面的例子，如果你没有在你的控制器中添加 reorderItems() 它将不起作用。您可以随意更改函数名称。

【讨论】：