动态名称的角度材料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.namemdDatepicker和mdDatepickerToggle属性中的静态值只是解决了运行时错误。但是，日期选择器不会被触发，直到一切都是静态的，这在md-datepicker意味着连名字#start{{column.name}}Picker必须包含一个静态值

来源

2017-06-18 Strider

把它包在'NG-template'，你将无需动态模板引用名 – yurzui

如果我里面包裹我所有的代码了一个'ng-template'全部日期块消失。根据[官方文档]（https://angular.io/guide/structural-directives#microsyntax）：_如果没有结构指令，并且只包含中的某些元素，则这些元素将消失_ – Strider

使用'ngTemplateOutlet'显示'模板' – yurzui

我想指出，在相关的问题发表的意见@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' 
    } 
]

来源

2017-06-22 15:22:04 Strider

我认为更好的解决方法是使用一个索引，而我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>

这样，您就可以通过元素裁判单独访问每个元素

来源

2017-12-19 09:50:01 Aous1000

这是正确的答案：作品像一个魅力。谢谢：） – Deunz

动态名称的角度材料2日期选择器

回答

相关问题