如何在Angular14仪表盘实现日期选择器搜索及结果筛选

你现有代码已经搭好了基础框架，但存在几个小问题需要调整，补充筛选逻辑后就能实现点击日期展示对应记录的效果。

现有代码的问题说明 #

• input type="date"的change事件触发时，event.keyCode是无效的（因为是鼠标选择日期，并非键盘输入），所以这个判断条件可以直接删掉
• 用var $this = this的写法可以换成箭头函数，避免this指向混乱，代码更简洁

完整实现步骤 #

1. 优化模板（HTML）

保留日期输入框，同时补充仪表盘数据展示区域，用*ngFor循环渲染筛选后的记录：

<!-- 日期选择器 -->
<input type="date" style="width: 100%; height: 34px" (change)="handleDateSelect($event)"/>

<!-- 仪表盘记录展示区 -->
<div class="dashboard-records">
  <div *ngFor="let record of filteredRecords" class="record-item">
    <p>日期: {{record.date | date:'yyyy-MM-dd'}}</p>
    <p>内容: {{record.content}}</p>
  </div>
</div>

2. 完善组件逻辑（TS）

定义数据源、筛选结果数组，实现日期选择后的筛选方法：

import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.css'],
  providers: [DatePipe]
})
export class DashboardComponent {
  // 模拟仪表盘原始数据（实际项目中可替换为后端接口返回数据）
  originalRecords = [
    { date: new Date('2024-05-01'), content: '五月一号的运营记录' },
    { date: new Date('2024-05-02'), content: '五月二号的运营记录' },
    { date: new Date('2024-05-03'), content: '五月三号的运营记录' }
  ];
  filteredRecords = [...this.originalRecords]; // 筛选后的结果数组
  timeout: any;

  constructor(private datePipe: DatePipe) {}

  handleDateSelect(event: any) {
    clearTimeout(this.timeout);
    // 用箭头函数避免this指向问题
    this.timeout = setTimeout(() => {
      const selectedDate = event.target.value;
      this.applySearchByDateFilter(selectedDate);
    }, 500);
  }

  applySearchByDateFilter(selectedDate: string) {
    if (!selectedDate) {
      // 未选择日期时，恢复显示全部记录
      this.filteredRecords = [...this.originalRecords];
      return;
    }
    // 统一日期格式后匹配筛选
    this.filteredRecords = this.originalRecords.filter(record => {
      const formattedRecordDate = this.datePipe.transform(record.date, 'yyyy-MM-dd');
      return formattedRecordDate === selectedDate;
    });
  }
}

关键说明 #

• 保留setTimeout做防抖是合理的，避免极端情况下频繁触发筛选逻辑
• 必须统一日期格式：input type="date"返回的是yyyy-MM-dd格式字符串，所以要把原始数据的日期也转成相同格式再匹配
• 如果你的数据来自后端接口，只需将originalRecords替换成接口返回的数据源即可

内容的提问来源于stack exchange，提问作者Somen Singh