Angular 如何使用ion reorder对分组项目进行重新排序

我正在尝试使用对页面中的某些项目进行重新排序。这些项目按组组织，因此一个组有多个项目。我希望在组内组织这些项目，但更重要的是，我希望能够将项目从一个组更改为另一个组

我目前面临两个问题：

• 我无法更新数组，因此更改时无法正确显示项目订单
• 我无法将项目移动到其组外，因此无法移动到其他组

---

html

{{group.name}
{{item.name}

打字稿

接口项{
身份证号码：，
名称：string
}
接口组{
名称：string，
项目：项目[]
}
接口GroupArray扩展数组{}
...
专用groupArray:groupArray=[
{
名称：“第一组”，
项目：[
{
id:1，
名称：“第一项”
},{
id:2，
名称：“第二项”
},{
id:3，
姓名：“第三者”
}
]
},
{
名称：“第二组”，
项目：[
{
id:4，
名称：'FourthItem'
},{
id:5，
名称：'FifthItem'
},{
id:6，
名称：“第六项”
}
]
}       
];
/**重新排序*/
doReorder（ev:CustomEvent）{
this.groupArray=ev.detail.complete（this.groupArray）；
}

---

我试图将

移动到几个位置，但这是我唯一能够移动正确项目的位置。如果我在

上方向上移动，整个列表将变为可拖动，并且我无法移动该项目

我知道这是因为

创建了两次，但我不能只创建一次并维护相同的方面，这与我链接的文档页面完全相同。不同之处在于，它们分别加载项目，而组只是可以拖动的另一个项目

我认为另一个问题与

complete（）

的工作方式有关。尽管它需要

any[]

作为参数，但我认为它不支持复杂的结构，只支持一个简单的数组

如何解决这两个问题

---

我用离子5和角10

---

对于重新排序问题，您有两件事

• 您向

  complete

  函数发送了错误的项目，它应该是呈现的项目（

  groupArray[index].items

  ），而不是根对象本身（

  groupArray

  ）

• 离子列表标题

  应位于

  离子重新排序组

  的上方，因此离子不会将其视为

  离子重新排序组

  的子项，从而扰乱阵列的重新排序逻辑

即使中的示例是使用一个大的

ion-reorder组和
ion-list-header
添加一些列表头，但是如果需要使用
complete
更新数组，这将不起作用

您可以这样做使其工作：

doReorder(ev: CustomEvent<ItemReorderEventDetail>, groupId: number) {
  let groupToChangeIndex = this.groupArray.findIndex(
    group => group.id === groupId
  );
  this.groupArray[groupToChangeIndex].items = ev.detail.complete(
    this.groupArray[groupToChangeIndex].items
  );
}

我尝试使用您的方法，但target属性会按重新排列之前的顺序返回
中的所有内容，因此我无法从中筛选元素，因为我不知道元素是什么，因为此列表很大且动态。我试图搜索事件中的每一个元素，但没有一个元素返回对移动对象的引用。你能为此添加StackBlitz吗？当然！我试着对重要的事情进行评论，并补充了我现在要做的事情。请查看我的最新答案这是一种比我尝试的方式更好的方式。我甚至想过要做这样的事情，但我甚至不知道该怎么做。这也是进一步了解
flatMap（）
和
reduce（）
的绝佳机会。我相信这两个问题现在都得到了回答。非常感谢你的帮助。
<ion-content>
  <ion-list *ngFor='let group of groupArray'>
    <ion-list-header>{{group.name}}</ion-list-header>
    <ion-reorder-group (ionItemReorder)="doReorder($event, group.id)" disabled="false">
      <ion-item *ngFor='let item of group.items'>
        <ion-reorder slot="start"></ion-reorder>
        <ion-label>
          {{item.name}}
        </ion-label>
      </ion-item>
    </ion-reorder-group>
  </ion-list>
</ion-content>

constructor() {
  this.allItemsFlattened = this.groupArray.flatMap((group, index) => [
    { isHeader: true, index: index, name: group.name },
    ...group.items
  ]);
}

/** Reorder objects in array */
doReorder(ev: CustomEvent<ItemReorderEventDetail>) {
  this.allItemsFlattened = ev.detail.complete(this.allItemsFlattened);
}

getRightOrder() {
  const rightOrder = this.allItemsFlattened.reduce((accumlator, item) => {
    if (item.isHeader) {
      const { id, name, ...rest } = this.groupArray[item.index];
      accumlator.push({ id, name, items: [] });
    } else {
      accumlator[accumlator.length - 1].items.push(item);
    }
    return accumlator;
  }, []);
  console.log(rightOrder);
}