Angular动态加载多个mat-datepicker模板引用问题求助

核心问题在于Angular模板引用变量不支持动态拼接命名（比如#field+i这种写法无效），导致输入框、切换按钮无法正确关联对应的日期选择器组件。

最简单的解决方案：利用*ngFor局部作用域的模板变量 #

在*ngFor的每个迭代块内，使用固定名称的模板引用变量即可——每个循环块的变量是独立隔离的，不会互相冲突：

<ng-container *ngFor="let field of dateFields; let i = index">
  <mat-form-field class="fuse-mat-dense w-2/5 flex-grow">
    <input
      matInput
      [matDatepicker]="picker"
      type="date"
      [formControlName]="field + i"
    />
    <mat-hint>DD/MM/YYYY</mat-hint>
    <mat-datepicker-toggle
      matIconSuffix
      [for]="picker"
    ></mat-datepicker-toggle>
    <mat-datepicker #picker></mat-datepicker>
  </mat-form-field>
</ng-container>

若需在组件类中访问datepicker实例 #

如果需要在TS代码中操作这些动态生成的日期选择器（比如手动打开/关闭），可以通过@ViewChildren获取所有实例：

import { Component, ViewChildren, QueryList } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';

@Component({
  // 组件元数据（如selector、templateUrl等）
})
export class YourComponent {
  @ViewChildren(MatDatepicker) datepickers!: QueryList<MatDatepicker<any>>;

  // 示例：打开指定索引的日期选择器
  openDatepicker(index: number): void {
    this.datepickers.toArray()[index].open();
  }
}

额外注意事项 #

• 确保formControlName对应的控件已在你的FormGroup中正确定义，field+i的命名格式要和TS中创建的控件名完全匹配。
• 你的依赖版本（Angular 15.1.1 + Material 15.1.1）完全支持上述写法，无需升级依赖。

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