使用另一个变量声明DOM元素变量名称

Question

我正在尝试基于随机数据类型生成反应式表单，但是我正在努力设置日期选择器。我使用商品的唯一ID创建了formControlNames，但日期选择器要求我声明一个DOM变量<mat-datepicker #myDiv>，但是我不能使用多个具有相同名称的变量，而我将需要多个日期选择器...在这里我的日期选择器结构：

<div *ngFor="let item of object.items" >

   ... // Handling other item data types

   <mat-form-field *ngIf="item.type == itemType.DATE">
       <input matInput [formControlName]="item.id"
                       [matDatepicker]="item.id">
       <mat-datepicker-toggle matSuffix [for]="item.id" ></mat-datepicker-toggle>
       <mat-datepicker #item.id ></mat-datepicker>
   </mat-form-field>

</div>

我希望有一个简单的方法可以解决此问题。如果不能，我将必须制造一个可以单独构建项目的组件，这样我可以确保每个组件只有一个日期选择器，我可以根据需要命名DOM变量，但是我希望我不需要走那么远。预先感谢。

Answer 1

我没有得到您太多的代码，但似乎您使用的是mvc框架。无论如何，为什么不使用JavaScript制作DOM并将其添加到所需标签的innerHtml中？