1

我正在构建一个应用程序，其中有 N 列（N 个项目列表），并且通过使用从有角材料中拖放，我可以在它们之间移动项目。我还在我的应用程序中使用NGRX和EntityAdapter。

我想问一下，当我移动一个对象时，如何正确更新项目的顺序？

示例：从“待办事项”列中移动第一项。该物品应放在刷牙之间并拿起杂货。 在此处输入图像描述

现在我知道如何更新列表中每个项目的列。我不知道的是如何按正确的顺序排列（默认情况下排序，所以可能按 id）

物品界面：

export interface Item{
 id:string;
 title:string;
 columnId:string;
}

columnId update 的调度操作：

  drop(event: CdkDragDrop<string[]>) {
        const droppedItem: SavedJob = event.item.data;
        const previousColumn = event.previousContainer.id;
        const currentColumn = event.container.id;
        this.store.dispatch(
            updateColumn({
                updates: {
                    id: droppedItem.id,
                    changes: {
                        columnId: currentColumn
                    }
                }
            })
        );

减速器：

on(SavedJobsActions.updateColumn,(state,action)=>{
        return savedJobsAdapter.updateOne(action.updates,{
            ...state,
            entities:{
                ...state.entities,
                [action.updates.id]:{
                    ...state.entities[action.updates.id]
                }
            }
            }
        )
    })

我应该如何正确更新columnId每个项目的顺序和顺序？我知道我应该为每个项目添加订单键，但是更新每一列的订单值可能会很困难。

4

2 回答 2

0

请参阅https://ngrx.io/guide/entity/adapter： sortComparer：用于对集合进行排序的比较函数。只有当集合需要在显示之前进行排序时，才需要比较器功能。设置为 false 以保持集合未排序，这在 CRUD 操作期间性能更高。

因此，如果您插入一个新值，如果您提供了一个 sortComparer，则应该对整个字典进行排序。否则它默认为我相信的 ID。比较器的实现取决于您希望如何排序，但它应该看起来像这样（假设 columnId 永远不会为空）。

createEntityAdapter({
   sortComparer: (item1: Item, item2: Item) => item1.columnId.localeCompare(item2.columnId),
})
于 2021-04-05T15:26:18.040 回答
0

我也有同样的情况。我的解决方法是添加一个名为index.

例如

interface Listing {
 name: string;
 index: number;
}

然后，每次 UI 排序发生时，让我们也更改索引。换句话说，选择器的结果会随着位置而改变。然后就可以得到排序结果了。

排序结果还是需要用"sortComparer"的，但是排序的不要用id，因为我们更新的不是ID，是index.

您也可以检查此索引排序技术。

于 2021-11-04T03:10:57.000 回答