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