ngForテーブル

Question

を生成するために、以下のようにIは、[{ "アカウント名"： "TEST1"、 "量"： "-28.11"}、

をJSON配列を有する、{ "アカウント名" "TEST2"、 "量"： "400"}、{ "アカウント名"： "TEST3"、 "量"： "-500"}]

私は次のようにテーブルを生成する必要があります、

test1 | test2 | test3 
--------------------- 
-28.11| 400 | 500 

これは私はこれが3つのhortizontal行を生成

<table> 
     <thead> 
     <tr> 
      <td *ngFor=" let key of accountList"> 
      {{key.AccountName}} 
      </td> 
     </tr> 
     </thead> 
     <tbody> 
     <tr *ngFor=" let res of accountList"> 
      {{res.Amount}} 
     </tr> 
     </tbody> 
    </table> 

を試してきたものですが、私はすべて、対応する見出しを1行にしたいです。

Answer 1

2列目が列ではなく、さらに多くの行（trでループ）を生成しています。その上別のtdレベルとループを追加します。

<table> 
    <thead> 
    <tr> 
     <td *ngFor=" let key of accountList"> 
     {{key.AccountName}} 
     </td> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td *ngFor=" let res of accountList"> 
     {{res.Amount}} 
     </td> 
    </tr> 
    </tbody> 
</table> 

Plunker：http://plnkr.co/edit/MldBaGTVGEPi7apIT0V0?p=preview

Answer 2

<tr> <td *ngFor=" let res of accountList"> {{res.Amount}} </td></tr> 

Answer 3

あなたがこれを使用することができ、

<table> 
    <td *ngFor=" let key of accountList"> 
    <tr> 
     <th> {{ key.AccountName }} </th> 
    </tr> 
    <tr> 
     <td> {{ key.Amount }} </td> 
    </tr> 
    </td> 
</table> 

あなたがテンプレートに一つだけngForを好む場合。 （ローカルで作業していることを確認しました）。このロジックは、基本的に、配列の長さに基づいて、右に複数の列（ヘッダーと値を2行で）を追加します。それが役に立てば幸い。