動態添加錨定名稱組件ngFor

我正在開發一個Angular 2+應用程序，我試圖根據需要動態生成儘可能多的Material Datepicker（我將在FormArray中生成一個輸入）。動態添加錨定名稱組件ngFor

<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/[email protected]:59 ("scription}}</option> 
</select> 
<input formControlName="value" placeholder="Valor" [ERROR ->][matDatepicker]="myDatepicker-{{rowIndex}}"> 
<mat-datepicker #myDatepicker-{{rowIndex}}></ma"): ng:///AppModuleShared/[email protected]:59

但我不能使用一個以上的投入。

您是否知道一種爲每個<input formControlName="value" placeholder="Valor" [matDatepicker]="myDatepicker">生成<mat-datepicker #myDatepicker></mat-datepicker>的方法？

來源

2017-12-18 VansFannel

它應該工作正常，沒有動態模板引用變量在迭代中，至少當我嘗試它:) – Alex

@ AJT_82謝謝，但我不知道你已經嘗試過。我是Angular的新成員，現在，我不知道如何生成動態錨定名稱並將其與輸入相關聯。 – VansFannel

那麼這就是我所說的，在這個迭代中你不需要動態模板引用變量:) https://stackblitz.com/edit/angular-srbucd?file=app/datepicker-overview-example.html – Alex

期待有你的代碼中沒有其他錯誤，你就不會需要創建一個動態模板引用變量，它應該迭代工作的很好，所以嘗試：

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

StackBlitz

來源

2017-12-18 09:47:46 Alex

動態添加錨定名稱組件ngFor

回答

相關問題