ngForの中にアンカーされた名前のコンポーネントを動的に追加する

Question

私はAngular 2+アプリケーションを開発しています。私は必要なだけMaterial Datepickerを動的に生成しようとしています（FormArrayで生成する各入力に対して1つ）。

<form [formGroup]="varDataForm" (ngSubmit)="onSubmit()" novalidate> 
    <div formArrayName="aggLevels" 
      *ngFor="let agLevel of varDataForm.get('aggLevels')?.controls; let aggLevelRow = index;"> 
     <div [formGroupName]="aggLevelRow"> 
      <label>{{agLevel?.get('aggregationLevelName')?.value}}</label> 
      <div formArrayName="variableDataForLevel" 
        *ngFor="let vardata of agLevel.get('variableDataForLevel')?.controls; let rowIndex = index;"> 
       <div [formGroupName]="rowIndex"> 
        <select formControlName="variableDataId"> 
         <option *ngFor="let gs1 of gs1AIs" [value]="gs1.id">{{gs1.description}}</option> 
        </select> 
        <input formControlName="value" placeholder="Valor" [matDatepicker]="myDatepicker-{{rowIndex}}"> 
        <mat-datepicker #myDatepicker-{{rowIndex}}></mat-datepicker> 
        <div class="error" *ngIf="vardata.get('value').hasError('required') && vardata.get('value').touched"> 
         Obligatorio 
        </div> 
        <button type="button" class="btn" (click)="deleteRow(aggLevelRow, rowIndex)" [disabled]="disableDelete(aggLevelRow, rowIndex)">Borrar</button> 
       </div> 
      </div> 
      <button type="button" class="btn" (click)="addRow(aggLevelRow)" [disabled]="disableAdd()">A&ntilde;adir</button> 
     </div> 
    </div> 
    <button *ngIf="varDataForm.get('aggLevels')?.controls?.length > 0" type="submit" class="btn btn-success" [disabled]="disableSubmit()">Guardar cambios</button> 
</form> 

私が使用しようとしました：

<input formControlName="value" placeholder="Valor" [matDatepicker]="myDatepicker-{{rowIndex}}"> 
<mat-datepicker #myDatepicker-{{rowIndex}}></mat-datepicker> 

しかし、私はエラーを取得：

NodeInvocationException: Template parse errors: 
Parser Error: Got interpolation ({{}}) where expression was expected at column 13 in [myDatepicker-{{rowIndex}}] in ng:///AppModuleShared/VarDataComponent.html@24:59 ("scription}}</option> 
</select> 
<input formControlName="value" placeholder="Valor" [ERROR ->][matDatepicker]="myDatepicker-{{rowIndex}}"> 
<mat-datepicker #myDatepicker-{{rowIndex}}></ma"): ng:///AppModuleShared/VarDataComponent.html@24:59 

をしかし、私は、複数の入力のための1つを使用することはできません。

<input formControlName="value" placeholder="Valor" [matDatepicker]="myDatepicker">ごとに<mat-datepicker #myDatepicker></mat-datepicker>を生成する方法はありますか？

Answer 1

あなたのコード内の他のエラーはありません期待し、あなたはそれが反復中に正常に動作する必要があり、動的なテンプレートの参照変数を作成する必要はありませんので、試してみてください。

<input formControlName="value" [matDatepicker]="myDatepicker"> 
<mat-datepicker #myDatepicker></mat-datepicker> 

StackBlitz