Angular2中的动态插值答案

【问题标题】：Dynamic Interpolation in Angular2Angular2中的动态插值
【发布时间】：2016-06-01 01:47:23
【问题描述】：

我正在学习 Angular-2 并尝试构建数据网格组件并遇到动态插值问题。假设，其他组件将像下面这样使用数据网格：

<data-grid [model] = 'users'>
   <column header='Last Name' value="lastName" ></column>
   <column header='First Name' value='firstName' ></column>
   <column header='Address' value='address' ></column>
</data-grid>

data-grid 组件包含一组列。从数据网格中，我尝试遍历列集合以构建列标题，然后显示所有数据。表格的标题很简单，但我不知道如何对行和列进行嵌套插值。

<div class="container" >
    <table class="table table-hover">
         <thead class="thead-default">
             <tr>
                <th template="ngFor let col of columns">
                    {{ col.header}}
                 <th>
             </tr>
         </thead>
      <tbody>
          <tr template="ngFor let row of model">
               <td template="ngFor let col of columns">
                <!-- want to loop though the columns 
                {{row.{{col.value}}}} //How to make this statement works? -->
              </td>
          </tr>
      </tbody>  
    </table>
</div>

知道如何解决这个问题吗？

谢谢，

奥斯汀

【问题讨论】：

你也以错误的方式使用 *ngFor

标签： dynamic angular interpolation

【解决方案1】：

您不需要额外的评估括号。使用方括号进行数组索引。

<tr *ngFor="let row of model">
   <td *ngFor="let col of columns">
       {{row[col.value]}} 
   </td>
</tr>

http://plnkr.co/edit/DVwolRDu0JNcsXTaTrir

【讨论】：

这看起来很有趣！
谢谢，它有效。但是，对于诸如之类的复杂绑定，我需要能够插入诸如“{{row.field1}}、{{ row.field2}}}" 或动态构建模板。
您还可以定义辅助方法来执行此类查找<td *ngFor="let col of columns"> {{getFields(row, col)}} </td>
谢谢，太好了！