具有动态名称的Angular Material 2 Datepicker

Question

我正在尝试使用动态名称实现datepicker组件.

我正在使用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

你对这个错误的原因有什么看法吗？

注意:column.name用mdDatepicker and mdDatepickerToggle属性中的静态值替换可以解决问题,但我的目标是使用动态值运行此代码

编辑:使用 和属性中column.name的静态值替换只解决运行时错误.但是,在所有内容都是静态的情况下,不会触发datepicker,这意味着即使名称中的名称也必须包含静态值mdDatepickermdDatepickerToggle#start{{column.name}}Pickermd-datepicker

Answer 1

我相信更好的解决方案是在迭代数组时使用索引

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

这样,您可以通过元素ref单独访问每个元素