Angular 6退房记录列表按起止日期实现筛选功能需求

我来帮你一步步搞定这个日期筛选功能，以下是完整的落地方案：

1. 更新HTML模板（绑定数据+添加筛选触发） #

首先得给日期输入框加上双向绑定，让组件能拿到用户选的日期，再添个筛选按钮触发筛选操作，顺便修正了原模板里的字段绑定小错误：

<div>
  <nav class="navbar">
    <a class="navbar-brand">Checkout-Reports</a>
  </nav>
  <div class="mt-3">
    <label>From </label>
    <input type="date" class="mx-3" [(ngModel)]="fromDate" />
    <label>To </label>
    <input class="mx-3" type="date" [(ngModel)]="toDate" />
    <button class="btn btn-primary" (click)="filterCheckouts()">筛选</button>
  </div>
</div>
<div id="table-scroll" class="table-scroll table-bordered mt-3">
  <div class="table-wrap" id="checkouts">
    <table class="main-table">
      <thead>
        <tr>
          <th class="fixed-side" scope="col">Name</th>
          <th scope="col">M-No</th>
          <th scope="col">Check-in Date</th>
          <th scope="col">Sharing Type</th>
          <th scope="col">Bed</th>
          <th scope="col">Advance</th>
          <th scope="col">Monthly Rent</th>
          <th scope="col">Checkouted Date</th>
        </tr>
      </thead>
      <tbody>
        <!-- 用筛选后的数组渲染表格 -->
        <tr *ngFor="let checkout of filteredCheckOutList">
          <th class="fixed-side"> {{ checkout.firstName }} {{ checkout.lastName }} </th>
          <td>{{ checkout.mNumber }}</td>
          <td>{{ checkout.checkInDate | date: "dd-MM-yyyy" }}</td>
          <!-- 原模板里Check-in Date绑错成了checkOutDate，这里修正过来了 -->
          <td>{{ checkout.sharingType || '4' }}</td>
          <td>{{ checkout.bedNo || '420' }}</td>
          <td>{{ checkout.balAmt }}</td>
          <td>{{ checkout.monthlyRent || '5000' }}</td>
          <td>{{ checkout.checkOutDate | date: "dd-MM-yyyy" }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

2. 修改TypeScript组件（核心筛选逻辑） #

接下来在组件里加日期变量、筛选结果数组，还有核心的筛选方法，别忘了导入FormsModule，不然双向绑定会失效：

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { CheckOut } from './your-checkout-model-path'; // 替换成你项目里的CheckOut模型路径
import { TenantService } from '../tenant.service'; // 替换成实际服务路径
import { CheckOutService } from '../check-out.service'; // 替换成实际服务路径

@Component({
  selector: "app-checkout-list-report",
  templateUrl: "./checkout-list-report.component.html",
  styleUrls: ["./checkout-list-report.component.scss"]
})
export class CheckoutListReportComponent implements OnInit {
  pgCheckOutList: CheckOut[] = [];
  filteredCheckOutList: CheckOut[] = []; // 存筛选后的结果
  fromDate: string = '';
  toDate: string = '';

  constructor(
    private tenantService: TenantService,
    private activatedRoute: ActivatedRoute,
    private router: Router,
    private checkOutService: CheckOutService
  ) {}

  ngOnInit() {
    this.checkOutService
      .getCheckOuts()
      .subscribe((checkouts: CheckOut[]) => {
        this.pgCheckOutList = checkouts;
        this.filteredCheckOutList = [...checkouts]; // 初始化先显示全部数据
      });
  }

  filterCheckouts() {
    // 先校验日期是否完整
    if (!this.fromDate || !this.toDate) {
      alert('请选择完整的日期范围哦');
      return;
    }

    const from = new Date(this.fromDate);
    const to = new Date(this.toDate);

    // 确保起始日期不晚于结束日期
    if (from > to) {
      alert('起始日期不能比结束日期晚呀');
      return;
    }

    // 核心筛选逻辑：只保留退房日期在选定范围内的记录
    this.filteredCheckOutList = this.pgCheckOutList.filter(checkout => {
      const checkoutDate = new Date(checkout.checkOutDate);
      return checkoutDate >= from && checkoutDate <= to;
    });
  }
}

敲黑板：记得在你的模块（比如AppModule）里导入FormsModule，不然[(ngModel)]没法用，代码大概是这样：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [FormsModule],
  // ...其他配置
})
export class AppModule { }

3. 现有CSS无需修改 #

你原来的CSS已经实现了表格滚动和固定列的效果，完全可以继续用：

.table-scroll {
  position: relative;
  margin: auto;
  overflow: hidden;
}
.table-wrap {
  width: 100%;
  overflow: auto;
}
.table-scroll table {
  width: 100%;
  margin: auto;
  border-collapse: separate;
  border-spacing: 0;
}
.table-scroll th, .table-scroll td {
  padding: 5px 10px;
  white-space: nowrap;
  vertical-align: top;
}

小优化建议（可选） #

• 可以给toDate加个(change)="filterCheckouts()"事件，用户选完结束日期自动触发筛选
• 加个「重置」按钮，一键恢复显示全部数据
• 如果项目里日期格式比较复杂，可以用moment.js这类库来处理日期比较，兼容性更好

内容的提问来源于stack exchange，提问作者sanjay kumar