简体繁体 English

Angular：从数据库加载时，拖放项目的顺序与以前不同

[英]Angular: drag and drop items are not in the same order as before when loading from database

原文 2023-01-02 15:39:02 6 1 angular/ database/ drag-and-drop

I use the drag and drop component from Angular.我使用来自 Angular 的拖放组件。

https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-connected-sorting https://material.angular.io/cdk/drag-drop/overview#cdk-drag-drop-connected-sorting

With each drop, the items are saved in a postgres database.每次掉落时，项目都会保存在 postgres 数据库中。 When I load the items from the database, the items are in a different order.当我从数据库加载项目时，项目的顺序不同。

How can I ensure that the data is loaded from the database in the same order as it was shown in the frontend?如何确保数据从数据库加载的顺序与前端显示的顺序相同？

Here's what I thought, but I'm looking for a simpler solution:这是我的想法，但我正在寻找一个更简单的解决方案：

I could add an extra column in the database to store the order of the items.我可以在数据库中添加一个额外的列来存储项目的顺序。

1 个解决方案

Indeed you may to add extra column often call displayOrder .事实上，您可以添加额外的列，通常调用displayOrder 。 For the sorting, a OrderBy in your SQL request is ok or you can do that in front with the sort javascript function.对于排序，您的 SQL 请求中的OrderBy是可以的，或者您可以在sort javascript function 之前执行此操作。

If you do that ALL users can modify the order of each item.如果这样做，所有用户都可以修改每个项目的顺序。 If each item is unique per user it's ok.如果每个用户的每个项目都是唯一的，那没关系。 Otherwise if User Alice see the Item 1 and User Bob see the Item 1 too and Alice modify the displayOrder of Item 1, Bob'll be impacted too.否则，如果用户 Alice 看到了项目 1，用户 Bob 也看到了项目 1，并且displayOrder修改了项目 1 的显示顺序，Bob 也会受到影响。 A join table will be needed with UserId ItemId displayOrder . UserId ItemId displayOrder需要一个连接表。