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> 

データグリッドコンポーネントは、列のコレクションを保持しています。データグリッドから、列コレクションをループして列ヘッダーを構築し、すべてのデータを表示しようとします。テーブルのヘッダーは簡単ですが、行と列のネストされた内挿を行う方法はわかりません。

<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