Angular Material 2 个具有动态名称的日期选择器

Question

我正在尝试实现一个具有动态名称的日期选择器组件。

我正在使用 Angular 4 开发一个基于 Angular Material 2 的项目，这是我的实现：

<input mdInput [mdDatepicker]="'start' + column.name + 'Picker'" placeholder="Start {{column.label}}" formControlName="start{{column.name}}">
<button mdSuffix [mdDatepickerToggle]="'start' + column.name + 'Picker'"></button>
<md-datepicker #start{{column.name}}Picker></md-datepicker>

其中 column.name 在我的 html 页面中动态变化。

我在运行时收到此错误：

ERROR TypeError: this._datepicker._registerInput is not a function

你知道这个错误的原因吗？

注意：在mdDatepicker和mdDatepickerToggle属性中用静态值替换column.name解决了问题，但我的目标是运行此代码具有动态值

编辑： 在 mdDatepicker 和 mdDatepickerToggle 属性中用静态值替换 column.name 只是解决了运行时间错误。但是日期选择器只有在所有内容都为静态时才会被触发，这意味着即使 md-datepicker 中的名称 #start{{column.name}}Picker 也必须包含静态值

Answer 1

我想指出 the solution @yurzui 在与问题相关的评论中提出的，所以每个人都可以看到：

<div *ngFor="let column of columns">
  <input mdInput [mdDatepicker]="startPicker" placeholder="Start {{column.label}}">
  <button mdSuffix [mdDatepickerToggle]="startPicker"></button>
  <md-datepicker #startPicker></md-datepicker>
</div>

columns = [ 
    {
      label: 'column1',
      name: 'name1'
    },
    {
      label: 'column1',
      name: 'name1'
    },
    {
      label: 'column1',
      name: 'name1'
    }  
]

Answer 2

我认为更好的解决方案是在遍历数组时使用索引

 <div *ngFor="let column of columns; let i=index">
   <input mdInput [mdDatepicker]="i" placeholder="Start {{column.label}}" name="{{column.name}}">
   <button mdSuffix [mdDatepickerToggle]="i"></button>
   <md-datepicker #i></md-datepicker>
 </div>

这样您就可以通过元素引用单独访问每个元素

Answer 3

在反应式表单数组中使用动态 material 日期选择器时，使用索引直接与 formGroupName 冲突。使用 "ii" 解决了我的问题。

<div *ngFor="let item of myForm.get('myFormArray').controls; let i = index">
 <div [formGroupName]="i">
  <mat-form-field>
    <input matInput formControlName="myDate" [matDatepicker]="ii" />
    <mat-datepicker-toggle matSuffix [for]="ii"></mat-datepicker-toggle>
    <mat-datepicker #ii touchUi></mat-datepicker>
  </mat-form-field>
 </div>
</div>

Angular Material 2 个具有动态名称的日期选择器

Angular Material 2 Datepicker with dynamic name

angular-material2

angular