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属性中的静态值替换mdDatepickerToggle可以解决问题，但我的目标是运行此代码动态值

修改：在column.name和mdDatepicker属性中使用静态值替换mdDatepickerToggle只会解决运行时错误。但是只有在所有内容都是静态的情况下才会触发datepicker，这意味着即使#start{{column.name}}Picker中的md-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

单独访问每个元素

Answer 2

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

＆＃13;

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

＆＃13;

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

Answer 3

在反应形式数组中使用动态材料日期选择器时，使用索引直接与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>

具有动态名称

3 个答案: