我正在尝试创建一个数据网格 - 或者让我们使用 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="let cell of rowData.children()"
非常感谢一如既往的帮助。
这是我在 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,我只是删除了 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 中,我首先重复 ROWS ,然后在重复的 columns 内,通过返回 val 和 key 。