如何使用 json 在 Angular2 中創建表

Question

我正在嘗試創建一個數據網格 - 或者讓我們使用 JSON 對象將其稱為 angular2 中的表來創建它。 我遇到的問題是我不知道表中有多少列，也不知道名稱或那些列。

根據我目前的理解，我需要定義行的外觀以渲染單元格，但如果我不知道列的名稱，那么我無法渲染行！

也許一個例子會讓事情更清楚......

下面是我需要在同一個表中呈現的兩個 JSON 示例...

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

應用程序字段映射行：

注意這是我卡住的地方！

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

如何創建正確數量的單元格以及如何在每個行的子級命名不同時循環遍歷行的子級...如果所有子級都被稱為單元格，那么我將使用一個數組，但我不知道它們是什么被稱為。

我還沒有找到任何方法將 JSON 節點的“子節點”轉換為數組......

例如。 *ngFor="讓行數據的單元格.children()"

一如既往的幫助非常感謝。

Answer 1

這是我在 AngularJS 中所做的，但你會明白的。 您的第二個 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，我只需刪除 - in label 並修復 JSON 格式

{
  "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"
        }
      ]
    }
  }
}

所以讓我解釋一下，對於thead，我只是重復列並放置標簽，而在行中，我首先重復 ROWS，然后在重復列中，通過返回 val 和 key。

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