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

Question

我正在使用 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 Angular: 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();
}

Answer 2

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 次。希望对你也有帮助。

Answer 3

  <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);
    }

Answer 4

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

打字稿 :

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

HTML :

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

Answer 5

使用 Angular - Ionic - Typescript

在 HTML file/Code:

<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() 它将不起作用。您可以根据需要更改函数名称。

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

ionic 4: <ion-reorder> not working as expected

ionic-framework

angular7

ionic4

reorderlist