0

我正在使用带有 SQL 后端和 FormBuilder 的 Angular8 来实时验证本地对象。

我现在正在为一个项目构建一个界面，该项目允许用户为活动租用设备。

有一个多页表单允许用户创建一个“事件”，这个“事件”可以包含许多“预订”。

例如，“事件”的愚蠢示例可能如下所示：

Event: Music festival
Reservation 1 : 2019-12-01 --> 2019-12-04
- 8 tables
- 2 chairs
- 4 brooms
Reservation 2 : 2019-12-01 --> 2019-12-02
- 1 DJ table
Reservation 3 : 2019-12-03 --> 2019-12-04
- 1 Laptop

我希望用户在将设备添加到预订之前和之后获得设备当前可用性的实时反馈。

我的第一直觉是查询后端 X 设备在 Y 和 Z 日期的当前可用性。然后，我会将这个“可用性计数”添加到地图中。

例如 ：

// Availabilities map
{
  "2019-12-03-2019-12-04": {
    "id_table": 16
  },
}

然后在我的角度模板中，我可以获取地图中的可用性计数，减去我表单中表格的总数，如果剩余计数 < 0，则显示警告消息。

问题是在我的模板中添加一个函数调用看起来真的很脏，我已经可以感觉到每当表单更改或按下按钮时都会进行大量调用。必须有更好的方法来处理这种情况，因为现在我的 .html 中有一些丑陋的东西：

<td>{{
  this.availabilityService.getAvailabilityFor(equipment.id, this.dateResMin, this.dateResMax)
  - this.formService.getTotalCountFor(equipment.id)
}}</td>

这意味着每次更改检测发生时至少有两个服务调用，并且在任何时候 getAvailabilityFor() 调用至少一个 http 调用以获取尚未在地图中的设备或日期。

另一种方法？

我在想，对于每个预订，我应该获取后端以获取所有设备的列表以及它们各自在当前 dateMin 和 dateMax 的可用性。然后，在向预订中添加设备时，我会在本地知道现在有多少可用，并且可以轻松显示数量是否有效。

但是有了这个流程，当预订的“dateMin”或“dateMax”发生变化时，我不知道该怎么办。

我可以轻松地再次查询后端以获取“设备及其可用性”的新列表，但是我可以做些什么来使用最新信息更新我当前的表单？

我现在遇到了一个“已验证”表格，其中包含以前日期的可用性计数，以及具有新日期可用性的设备列表。获取新数据后，我找不到修补当前表单的干净方法。

对于这个冗长的问题，我很抱歉，可能无法理解我想说的话，但我很难为这种情况找到一个干净的流程，特别是知道用户可以重新访问事件并编辑日期和数量字段。我需要找到一种方法来验证页面加载时的所有内容，在每个日期更改时，同时还为用户提供可供选择的设备列表（它们各自的可用性计数取决于预订 dateMin 和 dateMax）。

4

0 回答 0