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