Angular 2+，在 ngFor 创建的表单中指定输入类型属性

Question

更新-----

我可以显示一个带有方法的日期选择器，将“日期”传递给输入类型。但是现在我想使用一个更好的组件，即 Angular Material Datepicker。

现在我的代码如下；我看不到 datepicker 标签，我按照组件指南使用它...但我只有一个空字段...

<form class="form-inline">
    <div class="form-group" *ngFor="let meta of state.metaById; let i = index" style="margin: 5px">
      <label>{{meta.nome}}</label>
      <mat-form-field *ngIf="indovinaTipo(meta.nome)=='date'">
        <input matInput [matDatepicker]="picker" placeholder="Seleziona una data">
        <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
        <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>
      <input type="text" class="form-control" #nome (input)="inputInArray(nome.value, i)">
    </div>
    <button>...<button>
</form>

原帖---

感谢 *ngFor，我有一个动态生成的表单。它有效，但我需要为 for 的某些迭代指定不同的输入类型。

有可能吗？

这里是代码

<form class="form-inline">
    <div class="form-group" *ngFor="let meta of state.metaById; let i = index" style="margin: 5px">
      <label>{{meta.nome}}</label>
      <input type="text" class="form-control" #nome (input)="inputInArray(nome.value, i)">
    </div>
    <button type="submit" class="btn btn-primary"
            (click)="doClick()">invia
    </button>
  </form>

Answer 1

确保您的功能 indovinaTipo(meta.nome) 在您想要呈现日期选择器时返回正确的日期值，我在 plunker 中尝试了以下代码，它工作得很好，我'我不确定您的数据结构，只是将模拟值用于测试

state = [
      {nome: 'a'}
      {nome: 'date'}
      ]



<form class="form-inline">
    <div class="form-group" *ngFor="let meta of state; let i = index" style="margin: 5px">
      <label>{{meta.nome}}</label>

      <mat-form-field *ngIf="meta.nome==='date'">
       <input matInput [matDatepicker]="picker" placeholder="Choose a date">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
      </mat-form-field>

   <input *ngIf="meta.nome!='date'" type="text" class="form-control" #nome (input)="inputInArray(nome.value, i)">
    </div>
</form>

Plunker