具有动态名称的 Angular Material 2 Datepicker [英] Angular Material 2 Datepicker with dynamic name

问题描述

我正在尝试使用动态名称实现日期选择器组件.

我正在使用 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 不是函数

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

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

用 mdDatepicker 和 mdDatepickerToggle 属性中的静态值替换 column.name解决运行时错误.但是直到一切都是静态的才会触发日期选择器，这意味着即使 #start{{column.name}}Picker 在 md-datepicker 中的名称也必须包含一个静态值

解决方案

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

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

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

I am trying to implement a datepicker component with a dynamic name.

I am developing in an Angular Material 2 based project with Angular 4, and this is my implementation:

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

where column.name changes dynamically in my html page.

In runtime I am getting this error:

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

Do you have any idea about the cause of this error?

Note: Replacing column.name with a static value in the mdDatepicker and mdDatepickerToggle properties solves the problem, but my goal is to run this code with a dynamic value

Edit: The replacement of column.name with a static value in the mdDatepicker and mdDatepickerToggle properties just solves the runtime error. But the datepicker won't be triggered until everything is static, which means even the name #start{{column.name}}Picker in the md-datepicker has to contain a static value

解决方案

I believe a better solution is to use an index while iterating over the array

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

This way you can access each element individually via element ref

这篇关于具有动态名称的 Angular Material 2 Datepicker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！