Question

我正在尝试创建一个datagrid - 或者让我们使用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 =＆＃34;让rowData.children（）＆＃34;的单元格

非常感谢帮助。

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，我只需删除标签，并修复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/

如何使用json

1 个答案: