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

Question

UPDATE -----

我可以用一个方法显示一个datepicker，将“date”传递给输入类型。但是现在我想要使用更好的组件，即Angular Material 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> 

原来的职位---

我已经产生了DINAMIC表单，这要感谢* 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