如何使用 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/