jsonを使用してAngular2でテーブルを作成する方法

Question

datagridを作成しようとしています。これを作成するには、JSONオブジェクトを使用してangle2のテーブルを呼び出します。私が持っている問題は、どのように多くの列がテーブルにあるのか知りませんし、名前や列を知ることもできません。

私の現在の理解から、セルをレンダリングするために行がどのように見えるかを定義する必要がありますが、列が何を呼び出すのかわからない場合は、行を描画できません。

たぶん例は

例...

以下は、私が同じテーブルでレンダリングする必要がありますJSONの2つの例です...物事をより明確になります1

{ 
    "table": { 
    "columns": { 
     "column": [ 
     { 
      "-articleColumn": "articleCode", 
      "-label": "Article Code ", 
      "-fCode": "f9", 
      "-value": "column1" 
     }, 
     { 
      "-articleColumn": "Article.trend", 
      "-label": "Trend ", 
      "-fCode": "f25", 
      "-value": "column2" 
     } 
     ] 
    }, 
    "rows": { 
     "row": [ 
     { 
      "column1": "articleCode", 
      "column2": "Avg" 
     }, 
     { 
      "column1": "151110103", 
      "column2": "100" 
     }, 
     { 
      "column1": "151110109", 
      "column2": "101" 
     }, 
     { 
      "column1": "151110111", 
      "column2": "102" 
     }, 
     { 
      "column1": "151110117", 
      "column2": "103" 
     } 
     ] 
    } 
    } 
} 

例2ここで

{ 
    "table": { 
    "columns": { 
     "column": [ 
     { 
      "-articleColumn": "articleCode", 
      "-label": "Article Code ", 
      "-fCode": "f9", 
      "-value": "column1" 
     }, 
     { 
      "-articleColumn": "Article.trend", 
      "-label": "Trend ", 
      "-fCode": "f25", 
      "-value": "column2" 
     } 
     { 
      "-averageDemand": "Article.averageDemand", 
      "-label": "Average Demand ", 
      "-fCode": "f564", 
      "-value": "column3" 
     }, 
     { 
      "-warehouse": "Article.warehouse", 
      "-label": "Warehouse ", 
      "-fCode": "f295", 
      "-value": "column4" 
     } 
     ] 
    }, 
    "rows": { 
     "row": [ 
     { 
      "column1": "151110103", 
      "column2": "100" 
      "column3": "500" 
      "column4": "TOT" 
     }, 
     { 
      "column1": "151110109", 
      "column2": "101" 
      "column3": "46" 
      "column4": "TOT" 
     }, 
     { 
      "column1": "151110111", 
      "column2": "102" 
      "column3": "16" 
      "column4": "SEL" 
     }, 
     { 
      "column1": "151110117", 
      "column2": "103" 
      "column3": "112" 
      "column4": "SEL" 
     } 
     ] 
    } 
    } 
} 

は私のコンポーネントです...

表：

<table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp"> 
    <tbody>    
     <app-field-mapping-row [rowData]="row" *ngFor="let row of rows"></app-field-mapping-row> 
    </tbody> 
</table> 

アプリ-フィールドマッピング行：

NOTE私は動けなくなるところです！

<tr> 
    <td class="mdl-data-table__cell--non-numeric" *ngFor="let cell of rowData" > 
    {{cell}} 
</td> 
</tr> 

どのように私は、細胞の正確な数を作成することができますし、どのように私は一つ一つが異なって命名され...すべての子供がセルと呼ばれた場合は、行の子供をループその後、私が使用する配列を持っているでしょうかしかし、私は彼らが何と呼ばれているか知りません。私はに、配列JSONノードの「子供」をオンにする任意の方法を見つけることができませんでした

...

など。 * ngFor = "rowData.children（）のセルにする"

いつものように助けてくれてありがとう。

Answer 1

ここで私はAngularJSでそれをやったことがありますが、あなたはその点を得るでしょう。 - ラベルで、かつ

{ 
    "table": { 
    "columns": { 
     "column": [ 
     { 
      "-articleColumn": "articleCode", 
      "label": "Article Code ", 
      "-fCode": "f9", 
      "-value": "column1" 
     }, 
     { 
      "-articleColumn": "Article.trend", 
      "label": "Trend ", 
      "-fCode": "f25", 
      "-value": "column2" 
     }, 
     { 
      "-averageDemand": "Article.averageDemand", 
      "label": "Average Demand ", 
      "-fCode": "f564", 
      "-value": "column3" 
     }, 
     { 
      "-warehouse": "Article.warehouse", 
      "label": "Warehouse ", 
      "-fCode": "f295", 
      "-value": "column4" 
     } 
     ] 
    }, 
    "rows": { 
     "row": [ 
     { 
      "column1": "151110103", 
      "column2": "100", 
      "column3": "500", 
      "column4": "TOT" 
     }, 
     { 
      "column1": "151110109", 
      "column2": "101", 
      "column3": "46", 
      "column4": "TOT" 
     }, 
     { 
      "column1": "151110111", 
      "column2": "102", 
      "column3": "16", 
      "column4": "SEL" 
     }, 
     { 
      "column1": "151110117", 
      "column2": "103", 
      "column3": "112", 
      "column4": "SEL" 
     } 
     ] 
    } 
    } 
} 

をJSON形式を固定

<table class="table table-striped table-hover display" style="cellspacing:0;width:100%"> 
     <thead> 
      <tr> 
       <th ng-repeat="columns in tableData.table.columns.column"> 
        {{columns.label}} 
       </th> 
      </tr> 
     </thead> 

    <tbody > 
      <tr ng-repeat="row in tableData.table.rows.row"> 
       <td ng-repeat="(key,val) in row">{{val}}</td> 
      </tr> 
    </tbody> 
</table> 

これは私だけで削除して、あなたのJSONです： あなたの第二JSONは、これが私の見解であるコンマの

の多くが欠落しています私はtheadのために説明しましょう。列とラベルを貼り付けるだけです。列には、最初にROWSを繰り返してから、繰り返し列にvalとkeyを戻します。

jsFiddle： http://jsfiddle.net/noitse/Lvc0u55v/9487/