Angular 2:我可以动态设置模板引用变量的值吗?

时间:2017-11-15 22:21:28

标签: javascript angular

我正在使用angular2-collapsible生成一个表格,其中每一行都可以展开以获取详细数据。所以我的方法是使用*ngFor遍历列表并生成每一行和每个相应的细节。

<ng-container *ngFor="let adData of adDataList; let i = index">
  <collapsible-table-row [detail]="adDataDetailNameList[i]">
    <td>...</td>
    <td>...</td>
  </collapsible-table-row>

  <collapsible-table-row-detail #{{ adDataDetailNameList[i] }}>  <----This doesn't work
    <div>
      testing...
    </div>
  </collapsible-table-row-detail>
</ng-container>

以下是angular2-collapsible中的演示代码:

<collapsible-table [type]="'accordion'" bordered>
  <thead>
    <collapsible-table-row>
      <th>Col #1</th>
      <th>Col #2</th>
      <th>Col #3</th>
    </collapsible-table-row>
  </thead>
  <tbody>
    <collapsible-table-row [detail]="detail1">  <----Assign 'detail1'
      <td>Cell(0,0)</td>
      <td>Cell(0,1)</td>
      <td>Cell(0,2)</td>
    </collapsible-table-row>
    <collapsible-table-row-detail #detail1>  <----Refer to 'detail1'
      <table>
        <tr>
          <td width="75%">Row #1 Detail #1</td>
          <td>Row #1 Detail #2</td>
        </tr>
      </table>
    </collapsible-table-row-detail>
  </tbody>
</collapsible-table>

因此row-detailrow互动的方式是模板引用变量。由于我使用*ngFor生成这些行,我想知道是否有动态分配模板引用变量的方法。如果不可能(因为我在某处读到模板引用变量应该是静态的),是否有解决此问题的方法? 谢谢!

0 个答案:

没有答案