Question

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

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对于整个模板必须是唯一的，因此在mat-datepicker {{1}内重复上述块时，您无法直接使用*ngFor方案不会是唯一的。

任何指针都会有所帮助。

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>

mat-datepicker里面的* ngFor

2 个答案: