Dynamische Interpolation in Angular2

Question

Ich lerne Angular-2 und versuche, Data-Grid-Komponente zu bauen und ein Problem mit der dynamischen Interpolation zu lösen. sei angenommen, wird die andere Komponente, die die Daten-Raster wie die folgende verbrauchen:

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

Die Daten-grid-Komponente besitzt eine Sammlung von Spalten. Vom Datengürtel aus versuche ich, die Spaltensammlung zu durchlaufen, um den Spaltenkopf zu erstellen und dann alle Daten anzuzeigen. Die Header für die Tabelle sind einfach, aber ich weiß nicht, wie die verschachtelte Interpolation für Zeilen und Spalten durchgeführt werden soll.

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

Irgendeine Idee, wie man dieses Problem löst?

Dank,

Austin

Answer 1

Sie brauchen nicht die zusätzliche Auswertung Klammern. Verwenden Sie eckige Klammern für die Array-Indizierung.

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

http://plnkr.co/edit/DVwolRDu0JNcsXTaTrir