*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 for 场景，test 不会是唯一的。

任何指点都会有所帮助。

Answer 1

您可以向您的 ngFor 添加一个索引变量，并将该索引的值指定为您的日期选择器的标识符。您还可以在组件内创建一个 public 值数组，其含义类似于 ["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>

Answer 2

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

这是一个使用两种方式绑定模型的工作示例。

<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>

*ngFor 内的 mat-datepicker

mat-datepicker inside *ngFor

angular

datepicker

angular-material

angular-forms