Question

我正在学习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-gird，我尝试遍历columns集合以构建列标题，然后显示所有数据。表格的标题很简单，但我不知道如何对行和列进行嵌套插值。

<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>

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

感谢，

奥斯汀

Answer 1

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

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

http://plnkr.co/edit/DVwolRDu0JNcsXTaTrir

Angular2

1 个答案: