Angular中如何适配起止日期输入以筛选表格数据

一、适配日期输入到getPrices方法 #

1. 组件层绑定与方法调整
   在historical-prices.component.ts中，确保ReturnModel实例与模板双向绑定，并在getPrices中直接使用该实例的日期参数调用服务：

import { ReturnModel } from './path-to-your-model-file';
import { YourPriceService } from './path-to-your-service';

export class HistoricalPricesComponent {
  dateFilter: ReturnModel = new ReturnModel();
  priceList: any[] = [];

  constructor(private priceService: YourPriceService) {}

  getPrices() {
    // 直接将绑定好的日期参数传入服务方法
    this.priceService.fetchFilteredPrices(this.dateFilter.startDate, this.dateFilter.endDate)
      .subscribe({
        next: (response) => {
          this.priceList = response;
        },
        error: (err) => {
          console.error('数据获取失败:', err);
        }
      });
  }
}

2. 服务层参数处理与请求发送
   在service.ts中，处理日期格式（匹配后端要求）并构造请求：

import { HttpClient, HttpParams } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class YourPriceService {
  constructor(private http: HttpClient) {}

  fetchFilteredPrices(startDate: Date, endDate: Date) {
    // 格式化日期为后端接受的格式，比如YYYY-MM-DD
    const formattedStart = startDate.toISOString().split('T')[0];
    const formattedEnd = endDate.toISOString().split('T')[0];

    // GET请求用参数传递，POST则放入请求体
    const requestParams = new HttpParams()
      .set('startDate', formattedStart)
      .set('endDate', formattedEnd);

    return this.http.get<any[]>('your-webservice-api-url', { params: requestParams });
    // POST请求示例：
    // return this.http.post<any[]>('your-webservice-api-url', { startDate: formattedStart, endDate: formattedEnd });
  }
}

二、修复表单提交调用getPrices()的错误 #

常见问题及修复： #

• 事件绑定错误：使用表单专属的ngSubmit事件绑定提交操作，而非普通click，确保表单验证生效：

<form (ngSubmit)="getPrices()">
  <input type="date" [(ngModel)]="dateFilter.startDate" name="startDate" required>
  <input type="date" [(ngModel)]="dateFilter.endDate" name="endDate" required>
  <button type="submit">筛选数据</button>
</form>

<!-- 数据表格 -->
<table>
  <thead>
    <tr>
      <!-- 自定义表头 -->
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let price of priceList">
      <!-- 自定义数据列 -->
    </tr>
  </tbody>
</table>

注意：若使用ngModel，需在所在模块中导入FormsModule或ReactiveFormsModule。

• 日期同步异常：检查ReturnModel的属性名（如startDate/endDate）与模板绑定的名称是否完全一致，避免拼写错误导致参数未同步。

• 请求格式不匹配：确认后端接受的日期格式，若与前端默认格式不符，必须在服务层做格式化处理，避免传递原始Date对象导致的参数错误。

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