Angular 4 模板參考變量

Question

是否有可能有一個動態模板引用變量？

例如，我想做這樣的事情：

 <tr *ngFor="let item of items.controls; let i=index" >
  <th >{{i}}</th>
  <td>

    <mat-form-field>
      <input matInput matDatepicker="{{'pick'+i}}" placeholder="date" 
      formControlName="date">

      <mat-datepicker-toggle matSuffix for="{{'pick'+i}}">
      </mat-datepicker-toggle>

      <mat-datepicker #"{{'pick'+i}}"></mat-datepicker>

    </mat-form-field>

  </td>
 </tr>

我想弄清楚如何編寫<mat-datepicker #"{{'pick'+i}}"></mat-datepicker>這樣引用變量是動態的，循環索引。 在這里使用插值只是為了解釋我想要實現的目標。

問候阿迪薩

Answer 1

嵌入視圖(*ngFor) 中的模板引用變量有自己的作用域，因此您可以使用相同的名稱：

<tr *ngFor...>
    ...
    <mat-form-field>
      <input matInput [matDatepicker]="pick" placeholder="date" formControlName="date">
      <mat-datepicker-toggle matSuffix [for]="pick"></mat-datepicker-toggle>
      <mat-datepicker #pick></mat-datepicker>
    </mat-form-field>

例子

Answer 2

模板引用變量不能動態命名。 它們必須是靜態可分析的

在這里查看您對實現目標的其他建議