动态添加锚定名称组件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>的方法？

它应该工作正常，没有动态模板引用变量在迭代中，至少当我尝试它:) – 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

动态添加锚定名称组件ngFor

相关推荐