动态名称的角度材料2日期选择器
问题描述:
我试图用动态名称实现日期选择器组件。动态名称的角度材料2日期选择器
我开发与角4角的材料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
解决了这个问题,但我的目标是一个动态值,运行这段代码
编辑:与更换column.name
mdDatepicker
和mdDatepickerToggle
属性中的静态值只是解决了运行时错误。但是,日期选择器不会被触发,直到一切都是静态的,这在md-datepicker
意味着连名字#start{{column.name}}Picker
必须包含一个静态值
答
我想指出,在相关的问题发表的意见@yurzui提出the solution ,所以这将是所有人都看得到:
<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'
}
]
答
我认为更好的解决方法是使用一个索引,而我terating阵列
<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>
这样,您就可以通过元素裁判单独访问每个元素
+0
这是正确的答案:作品像一个魅力。谢谢 :) – Deunz
把它包在'NG-template',你将无需动态模板引用名 – yurzui
如果我里面包裹我所有的代码了一个'ng-template'全部日期块消失。根据[官方文档](https://angular.io/guide/structural-directives#microsyntax):_如果没有结构指令,并且只包含中的某些元素,则这些元素将消失_ –
Strider
使用'ngTemplateOutlet'显示'模板' – yurzui