*ngFor 内的 mat-datepicker

Question

在*ngFor 中使用mat-datepicker 时会遇到此问题。

mat-datepicker 需要模板引用变量#test 才能绑定到input。
一般来说，在*ngFor 中使用时，是否有直接的方法来获取引用变量？我找不到办法。

没有*ngFor的简单工作示例

<mat-form-field>
  <input matInput [matDatepicker]="test" placeholder="Enter Date" [(ngModel)]="someDate" name="someDate">
  <mat-datepicker-toggle matSuffix [for]="test"></mat-datepicker-toggle>
  <mat-datepicker #test></mat-datepicker>
</mat-form-field>

但是由于模板reference variables对于整个模板必须是唯一的，所以当上面的块在*ngFor中重复时，你不能直接使用mat-datepicker，test不会是唯一的。

任何指针都会有所帮助。

Answer 1

我想指出，如果您想给它一个更有意义的名称，可以使用下划线“_”作为分隔符。

这是一个具有双向模型绑定的工作示例。

<div *ngFor="let patient of patients; let i = index;">
  <input matInput [matDatepicker]="patientDueDate_i" placeholder="Due date" 
    [(ngModel)]="patient.dueDate">
   <mat-datepicker-toggle matSuffix [for]="patientDueDate_i"></mat-datepicker-toggle>
   <mat-datepicker #patientDueDate_i></mat-datepicker>   
</div>

Answer 2

您可以将索引变量添加到您的 ngFor 并将该索引的值分配为您的日期选择器的标识符。您还可以在组件内创建一个公共值数组，其含义类似于 ["dtPickerOne", "dtPickerTwo"] 并将它们用作值。

<div *ngFor="let t of test; let i = index;">
         <input matInput [matDatepicker]="i" placeholder="Choose a date" [attr.id]="dtPicker + i"
         [formControl]="dateFrom">
         <mat-datepicker-toggle matSuffix [for]="i"></mat-datepicker-toggle>
         <mat-datepicker #i></mat-datepicker>   
    </div>