* ngFor中的mat-datepicker

Question

使用mat-datepickerinside 时会遇到此问题*ngFor。

mat-datepicker需要模板引用变量#test才能绑定到input。通常，在
使用inside时*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对于整个模板必须是唯一的，因此mat-datepicker当在内重复上述块时，就不能直接使用for场景*ngFor，test因为它不是唯一的。

任何指针都会有所帮助。

Answer 1

您可以在ngFor中添加一个索引变量，并将该索引的值分配为datepicker的标识符。您还可以在组件内部创建一个值的公共数组，这些值的含义类似于[“ 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>