【问题标题】:How to save order of Angular reordered list that I get from the back-end如何保存我从后端获得的 Angular 重新排序列表的顺序
【发布时间】:2020-03-30 02:01:03
【问题描述】:

当用户打开页面时,他们会看到一个列表,他们可以通过 angulars 拖放重新排序。问题当然是前端顺序变了,后端顺序没有变。跟踪此列表顺序的最佳方法是什么?这样当用户重新访问时,他们会显示他们离开的顺序

【问题讨论】:

  • 当前端订单发生变化时,您应该进行 api 调用并在服务器中也进行相同的更改
  • 您从服务器获得的每个项目都应该有一个id,当在客户端,订单发生变化时,对服务器进行 api 调用,包括发回服务器端 id 并在服务器更新订单该项目的

标签: angular angular-dragdrop angulardraganddroplists


【解决方案1】:

最好将order 属性添加到您从后端获取的任何实体中,并在每次用户重新排列项目时相应地更新该属性

您还可以一次更新所有商品的订单价值,例如。在 FE 上单击 apply 后 - 奖金应用/恢复更改功能

【讨论】:

    【解决方案2】:

    我相信排序只在前端很重要,因为无论你从后端得到什么,你都会在前端使用不同的排序选项对其进行排序。

    如果我理解正确,您希望在会话中“存储”排序顺序,以便当用户返回该页面时,您可以从后端获取列表并根据存储的“最后排序顺序”对其进行排序。

    如果您的应用程序没有任何应用程序状态,您可以为此目的使用浏览器会话存储。

    // setting it 
    window.sessionStorage.setItem('sortOrder', 'sortByDate');
    
    // getting it
    const sortOrder = window.sessionStorage.getItem('sortOrder');
    

    【讨论】:

    • 这不是一个理想的选择,因为某些项目可能会在服务器中被删除,并且当下次客户端加载数据时,订单会变得一团糟
    • 如果项目改变了,为什么排序会乱?即使您从后端获取新列表,排序顺序也会在仅从后端获取后应用到它
    猜你喜欢
    • 2017-07-03
    • 2011-10-03
    • 1970-01-01
    • 1970-01-01
    • 2019-02-22
    • 2011-11-25
    • 1970-01-01
    • 2016-04-28
    • 1970-01-01
    相关资源
    最近更新 更多