Angular2中的动态插值

Question

I am learning Angular-2 and try to build data-grid component and run into a problem with dynamic interpolation. Assume, the other component will consume the data-grid like the following:

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

The data-grid component holds a collection of columns. From the data-gird, I try to loop through the columns collection to build the column header then show all data. The headers for the table is easy but I don't know how to do the nested interpolation for row and 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>

Any idea how to solve this problem?

thanks,

Austin

Answer 1

You do not need the additional evaluation brackets. Use square brackets for array indexing.

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

http://plnkr.co/edit/DVwolRDu0JNcsXTaTrir