jquery - Angular 8：如何在生成的 jQuery 表上应用日期范围数组

Question

日期列表应显示几个公寓房间的入住情况。

我在我的 Angular 模板中创建了两个简单的日期选择器，名为occupancy.component.html. 用户选择两个日期并提交后fetchBookings()，会在 my 中触发一个名为 的函数，其中包含一个 jQuery 脚本，occupancy.component.ts并生成两个选定日期之间的所有日期。生成的日期将显示在一个简单的 HTML 表格中，其中包含我每个公寓的一列。

这是我要存档的模型 - 假设用户选择了 9 月 15 日和 17 日：

| Date       | Apartment 1 | Apartment 2 | Apartment 3 | Apartment 4 |
|------------|-------------|-------------|-------------|-------------|
| 15.09.2019 | (available) | (closed)    | (closed)    | (available) |
| 16.09.2019 | (available) | (closed)    | (closed)    | (closed)    |
| 17.09.2019 | (available) | (available) | (closed)    | (closed)    |

同时，将执行对我的后端（Node / Express / MongoDB）的 API 调用，以获取与给定日期范围匹配的所有预订。我得到一个包含预订作为数组的对象。

这是给定对象的示例：

{
  "success": true,
  "results": [
    {
      "_id": "5d6711bad74ae46cf7d07a02",
      "firstName": "Amy",
      "bookingStart": "2019-09-15T00:00:00.000Z",
      "bookingEnd": "2019-09-25T22:00:00.000Z",
      "roomId": "1",
    },
    {
      "_id": "5d6711bad74ae46cf7d07a03",
      "firstName": "Marc",
      "bookingStart": "2019-09-08T00:00:00.000Z",
      "bookingEnd": "2019-09-18T22:00:00.000Z",
      "roomId": "2",
    },
  ]
}

代表公寓的roomId名称，其中的结果应该在相应的表格列中进行排序。代表单次预订的开始和结束日期bookingStart。bookingEnd此信息应应用于日期行。

jQuery 生成两个选定 ( occupancy.component.ts) 之间的日期：

while (currentDate <= myEndDate) {
        if (counter <= 1000) {
          foundDates.push(new Date(currentDate));
          shortDate = currentDate.toLocaleString().substring(0, currentDate.toLocaleString().indexOf(', '));

          $('#resultsList').append(
            '<tr class="listResults"><td>' +
              shortDate +
              '</td><td>' +
              'Apartment 1' +
              '</td><td>' +
              'Apartment 2' +
              '</td><td>' +
              'Apartment 3' +
              '</td><td>' +
              'Apartment 4' +
              '</td></tr>'
          );

          currentDate.setDate(currentDate.getDate() + 1);
          counter++;
        } else {
          $('#statusText').html(
            'Too Many Results.<p style="font-size: 11px;">Your Search has more than ' +
              (counter - 1) +
              ' results.  <br>Try again with a smaller date range.</p>'
          );
          $('.listResults').remove();
          $('#resultsList').hide();
          return;
        }
        $('#resultsList').show();
      }

API请求来自occupancy.component.ts：

this.bookingsService
        .getBookingsDateRange({ params })
        .pipe(
          finalize(() => {
            this.isLoading = false;
          })
        )
        .subscribe((bookings: any) => {
          console.log(bookings);
          this.bookings = bookings;
        });

我希望我已经输入了您需要的所有信息。

一切正常，但我坚持在前端日期表上应用服务器它的响应。你能给我一个方法或提示如何解决这个问题吗？谢谢！

标签： jqueryarraysangulardatehtml-table