如何在Mat-Table中为Mat-Datepicker设置动态值？

问题分析 #

你当前的代码里，所有表格行共用同一个auctionDate FormControl，这会导致所有行的日期选择器绑定同一个值，无法实现每行独立显示和修改日期的需求。另外，数据源里的auctionDate是字符串格式，Mat-Datepicker需要的是Date类型，直接绑定会显示异常。

方案一：使用FormArray管理每行的表单控件（推荐用于需要表单验证/批量提交的场景） #

步骤1：构建FormArray并初始化数据 #

在组件类中，把单个FormControl替换成FormArray，遍历数据源为每行创建对应的FormControl，并将字符串日期转换为Date类型：

import { FormArray, FormBuilder, FormControl } from '@angular/forms';
// ...其他导入

export class YourComponent {
  data = { items: [] };
  auctionDatesArray: FormArray;
  today = new Date();

  constructor(private fb: FormBuilder) {}

  ngOnInit(): void {
    // 初始化数据源
    this.data.items = [
      {
        "id": "65a03ce73b8226287003f3b4",
        "subscriberId": "6331733aa38f414a418ab3fc",
        "locationId": "63317704a38f414a418ab407",
        "unitNo": "15151",
        "customerTransactionId": "RB2SZ3VF",
        "auctionDate": "04/04/2023",
        "auctionLocation": "Location 1212",
        "address": "12340 Boggy Creek ",
        "businessNumber": "555544444444"
      },
      {
        "id": "65a03ce73b8226287003f3b4",
        "subscriberId": "6331733aa38f414a418ab3fc",
        "locationId": "63317704a38f414a418ab407",
        "unitNo": "15151",
        "customerTransactionId": "RB2SZ3VF",
        "auctionDate": "05/04/2023",
        "auctionLocation": "Location 1212",
        "address": "12340 Boggy Creek ",
        "businessNumber": "555544444444"
      }
    ];

    // 初始化FormArray，将字符串日期转为Date类型
    this.auctionDatesArray = this.fb.array(
      this.data.items.map(item => {
        // 解析MM/DD/YYYY格式的字符串为Date
        const [month, day, year] = item.auctionDate.split('/');
        const date = new Date(+year, +month - 1, +day);
        return new FormControl(date);
      })
    );

    // 监听控件值变化，同步回数据源（可选，根据需求）
    this.auctionDatesArray.valueChanges.subscribe(values => {
      values.forEach((date: Date, index: number) => {
        // 将Date转回MM/DD/YYYY格式的字符串
        const formattedDate = `${(date.getMonth()+1).toString().padStart(2,'0')}/${date.getDate().toString().padStart(2,'0')}/${date.getFullYear()}`;
        this.data.items[index].auctionDate = formattedDate;
      });
    });
  }

  // 获取对应行的FormControl
  getAuctionDateControl(index: number): FormControl {
    return this.auctionDatesArray.at(index) as FormControl;
  }
}

步骤2：修改HTML模板，绑定对应行的FormControl #

在表格中，通过行索引获取FormArray中对应的控件，同时为每个日期选择器设置唯一的模板引用变量：

<ng-container matColumnDef="auctionDate">
  <th mat-header-cell *matHeaderCellDef>Auction Date</th>
  <td mat-cell *matCellDef="let row; let i = index">
    <input 
      [formControl]="getAuctionDateControl(i)" 
      matInput 
      [matDatepicker]="picker_{{i}}" 
      [min]="today"
    >
    <mat-datepicker-toggle matSuffix [for]="picker_{{i}}"></mat-datepicker-toggle>
    <mat-datepicker #picker_{{i}}></mat-datepicker>
  </td>
</ng-container>

方案二：直接绑定行数据（适合简单场景，无需表单验证） #

步骤1：修改数据源的日期格式（或在模板中转换） #

在组件中，先将数据源的字符串日期转为Date类型，方便Datepicker绑定：

export class YourComponent {
  data = { items: [] };
  today = new Date();

  ngOnInit(): void {
    this.data.items = [
      // ...数据源
    ].map(item => {
      const [month, day, year] = item.auctionDate.split('/');
      return {
        ...item,
        auctionDate: new Date(+year, +month - 1, +day)
      };
    });
  }

  // 当日期修改时，同步更新数据（可选）
  onDateChange(date: Date, row: any) {
    row.auctionDate = date;
    // 如果需要转回字符串格式，可在此处理
  }
}

步骤2：修改HTML模板，双向绑定行的auctionDate字段 #

<ng-container matColumnDef="auctionDate">
  <th mat-header-cell *matHeaderCellDef>Auction Date</th>
  <td mat-cell *matCellDef="let row; let i = index">
    <input 
      [(ngModel)]="row.auctionDate" 
      matInput 
      [matDatepicker]="picker_{{i}}" 
      [min]="today"
      (dateChange)="onDateChange($event.value, row)"
    >
    <mat-datepicker-toggle matSuffix [for]="picker_{{i}}"></mat-datepicker-toggle>
    <mat-datepicker #picker_{{i}}></mat-datepicker>
  </td>
</ng-container>

注意事项 #

• 确保每个日期选择器的模板引用变量（#picker_{{i}}）是唯一的，避免冲突。
• 日期格式转换要注意月份是从0开始的（JavaScript Date的特性），所以解析时要减1。
• 如果使用Reactive Forms，记得在模块中导入ReactiveFormsModule；如果使用ngModel，要导入FormsModule。

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