Angular DataTables筛选后无法正确刷新数据问题求助

我在Angular项目中使用Angular DataTables展示从服务端获取的预订数据，UI界面设有三个操作按钮：显示全部、筛选今日入住、筛选今日退房。

初始时，将服务端返回的数据存入主数组reservations，同时赋值给筛选数组filteredReservations，表格始终展示filteredReservations中的数据。点击筛选今日入住按钮时，筛选出check_in_date为今日的数据；点击筛选今日退房按钮时，筛选出check_out_date为今日的数据，每次操作后都会调用reinitializeTable()方法刷新表格。

但筛选功能仅首次生效，例如筛选今日入住后，再次筛选今日退房或点击显示全部时，表格会变为空表。

TS代码 #

dtOptions: Config = {};
dtTrigger: Subject<any> = new Subject<any>();
reservations: Reservation[] = [];
filteredReservations: Reservation[] = [];

constructor(private reservationsService: ReservationsService) { }

ngOnInit(): void {
  this.dtOptions = {
    scrollX: true,
    scrollCollapse: true,
    pageLength: 25,
    processing: true,
    stateSave: true,
    pagingType: 'full_numbers',
    retrieve: true
  };

  this.getReservations();
}

getReservations(): void {
  this.reservationsService.getReservations().subscribe(data => {
    for (let reservation of data.data) {
      let finalReservation: Reservation = new Reservation(
        reservation.id, reservation.name, reservation.national_id, reservation.phone,
      reservation.unit, reservation.platform, reservation.guest, reservation.reference_id,
      reservation.day_amount, reservation.total_amount, reservation.paid_amount,
      reservation.remaining_amount, reservation.notes, reservation.employee,
      reservation.check_in_date, reservation.check_in_time, reservation.check_out_date,
      reservation.check_out_time, reservation.duration, reservation.status
      );
      this.reservations.push(finalReservation);
    }

    this.filteredReservations = [...this.reservations];
    this.dtTrigger.next(null);
    console.log("All reservations: ", this.reservations);
  }, error => {
    Swal.fire({
      icon: 'error',
      title: 'Error!',
      text: error.error.message
    });
  });
}

showAllReservations(): void {
  this.filteredReservations = [...this.reservations];
  this.reinitializeTable();
  console.log("Show all reservations: ", this.filteredReservations);
}

filterCheckIns(): void {
  const today = this.formatDate(new Date());
  console.log("Today's date: ", today);
  this.filteredReservations = this.reservations.filter(reservation => {
    const checkInDate = this.formatDate(new Date(reservation.check_in_date));
    console.log("Checking in date: ", checkInDate);
    return checkInDate === today;
  });
  this.reinitializeTable();
  console.log("Filtered check-ins: ", this.filteredReservations);
  console.log("Main Reservations: ", this.reservations);
}

filterCheckOuts(): void {
  const today = this.formatDate(new Date());
  console.log("Today's date: ", today);
  this.filteredReservations = this.reservations.filter(reservation => {
    const checkOutDate = this.formatDate(new Date(reservation.check_out_date));
    console.log("Checking out date: ", checkOutDate);
    return checkOutDate === today;
  });
  this.reinitializeTable();
  console.log("Filtered check-outs: ", this.filteredReservations);
  console.log("Main Reservations: ", this.reservations);
}

formatDate(date: Date): string {
  const day = ('0' + date.getDate()).slice(-2);
  const month = ('0' + (date.getMonth() + 1)).slice(-2);
  const year = date.getFullYear();
  return `${day}/${month}/${year}`;
}

reinitializeTable(): void {
  if ($.fn.dataTable.isDataTable('#reservationsTable')) {
    $('#reservationsTable').DataTable().destroy();
  }
  this.dtTrigger.next(null);
}

ngOnDestroy(): void {
  this.dtTrigger.unsubscribe();
}

HTML代码 #

<table id="reservationsTable" class="table table-hover row-border hover nowrap" datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger">
  <thead class="bg-danger">
    <tr>
      <th class="p-3 text-center">ID</th>
      <th class="p-3 text-center">Name</th>
      <th class="p-3 text-center">Unit</th>
      <th class="p-3 text-center">Platform</th>
      <th class="p-3 text-center">Check In Date</th>
      <th class="p-3 text-center">Duration</th>
      <th class="p-3 text-center">Total Amount</th>
      <th class="p-3 text-center">Remaining Amount</th>
      <th class="p-3 text-center">Status</th>
      <th class="p-3 text-center">View</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let reservation of filteredReservations">
      <td class="p-3 text-center">{{ reservation.id }}</td>
      <td class="p-3 text-center">{{ reservation.name }}</td>
      <td class="p-3 text-center">{{ reservation.unit.name }}</td>
      <td class="p-3 text-center">
        <img [src]="'https://back.sky2030central.com' + reservation.platform.logo"
          [alt]="reservation.platform.name + 'Logo'" class="platform-logo">
      </td>
      <td class="p-3 text-center">{{ reservation.check_in_date | date: 'dd/MM/yyyy' }}</td>
      <td class="p-3 text-center">{{ reservation.duration }}</td>
      <td class="p-3 text-center">{{ reservation.total_amount }} SAR</td>
      <td class="p-3 text-center">
        <span class="p-2 rounded" [class.remaining-amount-positive]="+reservation.remaining_amount > 0"
          [class.remaining-amount-negative]="+reservation.remaining_amount <= 0">{{ reservation.remaining_amount }}
          SAR</span>
      </td>
      <td class="p-3 text-center">
        <span class="p-2 rounded" [class.status-box-unconfirmed]="reservation.status === 'Unconfirmed'"
          [class.status-box-confirmed]="reservation.status === 'Confirmed'"
          [class.status-box-staying]="reservation.status === 'Staying'"
          [class.status-box-suspended]="reservation.status === 'Suspended'"
          [class.status-box-closed]="reservation.status === 'Closed'">{{ reservation.status }}</span>
      </td>
      <td class="p-3 text-center">
        <button type="button" class="btn btn-success text-center" [routerLink]="'../view/' + reservation.id">
          <i class="bi bi-eye"></i>
        </button>
      </td>
    </tr>
  </tbody>
</table>

内容的提问来源于stack exchange，提问作者Osama El Emam