Mat-Datepicker多行场景：UI显示Permanent但后端传指定日期的问题

问题根源 #

核心问题是模板引用变量重复绑定——所有行的mat-datepicker共用了同一个变量名（比如#picker），导致点击按钮时只会操作第一行的选择器实例。另外，输入框的显示文本和实际提交日期需要分离，不能直接把字符串“Permanent”绑定到Date类型的变量上。

分步解决方案 #

1. 给每行数据添加独立状态

在组件初始化时，为数据源的每个对象扩展两个关键属性：

• displayText：控制输入框显示的文本（用于展示“Permanent”）
• dateToSubmit：实际要传给后端的日期值

示例代码：

// 假设你的数据源是items数组，每个item已有startDate字段
ngOnInit() {
  this.items.forEach(item => {
    item.displayText = '';
    item.dateToSubmit = null;
  });
}

2. 模板中绑定独立的选择器和显示值

不再用固定的全局模板变量，给每行的mat-datepicker绑定独立引用，并通过[value]控制输入框显示内容：

<div *ngFor="let item of items">
  <mat-form-field>
    <!-- 优先显示displayText，否则显示日期 -->
    <input 
      matInput 
      [matDatepicker]="picker" 
      [value]="item.displayText || (item.dateToSubmit || item.startDate) | date:'yyyy-MM-dd'"
    >
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <!-- 每行用独立的模板变量#picker -->
    <mat-datepicker #picker (dateChange)="resetDisplayText(item, $event)"></mat-datepicker>
  </mat-form-field>
  <button mat-button (click)="makePermanent(item, picker)">Make Permanent</button>
</div>

3. 实现「Make Permanent」逻辑

在组件方法中完成日期计算、显示文本设置和选择器关闭：

makePermanent(item: any, picker: MatDatepicker<Date>) {
  // 计算起始时间加10年的日期
  const tenYearsLater = new Date(item.startDate);
  tenYearsLater.setFullYear(tenYearsLater.getFullYear() + 10);
  
  // 赋值提交用的日期
  item.dateToSubmit = tenYearsLater;
  // 设置输入框显示“Permanent”
  item.displayText = 'Permanent';
  // 关闭当前行的日期选择器
  picker.close();
}

// 当用户手动选择日期时，重置显示文本
resetDisplayText(item: any, event: MatDatepickerInputEvent<Date>) {
  item.dateToSubmit = event.value;
  item.displayText = '';
}

4. 提交时的处理

向后端发送请求时，直接使用每个item的dateToSubmit字段即可：

submitData() {
  const submitData = this.items.map(item => ({
    ...item,
    endDate: item.dateToSubmit || item.startDate // 兜底用原始起始时间
  }));
  // 调用后端接口发送submitData
}

关键说明 #

• 模板引用变量在循环中会创建独立的上下文，即使变量名相同，也会指向当前行的选择器实例
• 用[value]而非[(ngModel)]绑定输入框，是为了区分显示文本（字符串）和实际日期值（Date类型），避免类型冲突

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