Angular：如何解决'" | Date'无法赋值给'string | number | boolean'的类型错误

错误原因很明确：HttpParams.set()方法只接受字符串、数字或布尔值类型，你直接传入了Date对象，类型不匹配；同时后端需要的是YYYY-MM-DD格式的日期字符串，不是原生Date对象。

步骤1：添加日期格式化工具函数 #

在你的Angular服务里新增一个私有函数，把Date对象转换成后端要求的字符串格式：

private formatDate(date?: Date): string {
  if (!date) return '';
  // 提取年、月、日，确保月份和日期是两位数
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

步骤2：修改服务请求方法 #

调用上面的格式化函数处理startDate和endDate，替换原来的直接赋值：

import { ILeaveList } from 'src/app/leave-list.model';

// 先添加上面的formatDate函数

getAllLeave(startDate?: Date, endDate?: Date, searchQuery?: string, pageNumber?: number, pageSize?: number): Observable<ILeaveList[]> {
  let params = new HttpParams()
    .set('StartDate', this.formatDate(startDate))
    .set('EndDate', this.formatDate(endDate))
    .set('searchQuery', searchQuery ?? '')
    .set('pageNumber', pageNumber?.toString() ?? '')
    .set('pageSize', pageSize?.toString() ?? '');
  return this.http.get<ILeaveList[]>(this.baseUrl + '/leaves/all-leaves', { params: params });
}

额外注意点 #

• 后端的TransactionFilter中StartDate和EndDate是可空DateTime，当Angular传入空字符串时，后端模型绑定会自动解析为null，符合你的需求。
• 确保传入的startDate和endDate是有效的Date实例，避免格式化函数出错。如果有从前端表单获取的日期字符串，要先转换成Date对象再传入这个方法。

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