角度js +类型脚本中的动态列表

Posted 2023-02-22

【中文标题】角度js +类型脚本中的动态列表

【英文标题】：Dynamic column table in angular js + Type scripts

【发布时间】：2018-12-08 12:56:26

【问题描述】：

我想使用 anguler js 创建以下动态列表。

根据我的要求，水果、蔬菜等列集可以根据数据集动态变化。我想从 json 文件加载数据。 例如：

[

  "clusterID":"1",
  "storeCode": "S2HK",
  "storeName": "store 1",
  "Vegetables":
  
      "Ordered":"272",
      "Delivery":"250",
      "FR":"70%",
      "Gap":"22"
  ,
  "Fruit":
  
      "Ordered":"300",
      "Delivery":"250",
      "FR":"60%",
      "Gap":"50"
  
,

  "clusterID":"1",
  "storeCode": "SCCC",
  "storeName": "store 2",
  "Vegetables":
  
      "Ordered":"500",
      "Delivery":"500",
      "FR":"100%",
      "Gap":"0"
  ,
  "Fruit":
  
      "Ordered":"750",
      "Delivery":"700",
      "FR":"90%",
      "Gap":"50"
  

]

我尝试了很多方法，但无法创建动态表。如何创建这种类型的表？

【问题讨论】：

如果您希望有人能够回答您的问题，您需要展示您尝试过的内容以及失败的地方。你的问题有点太大了，如果你想让别人花时间回答你，你需要更具体一点，否则，没人知道从哪里开始。

【参考方案1】：

你需要使表结构如下：

<table border="1" cellpadding="10" cellspacing="0">
<thead>
  <tr>
    <th rowspan="2">Store</th>
    <th rowspan="2">Store Name</th>
    <th colspan="4">Vegetables</th>
    <th colspan="4">Fruit</th>
  </tr>
  <tr>
    <th>Ordered</th>
    <th>Delivery</th>
    <th>FR</th>
    <th>Gap</th>
    <th>Ordered</th>
    <th>Delivery</th>
    <th>FR</th>
    <th>Gap</th>
  </tr>
</thead>
<tbody>
  <tr *ngFor="let item of items">
    <td>item.storeCode</td>
    <td>item.storeName</td>
    <td>item.Vegetables.Ordered</td>
    <td>item.Vegetables.Delivery</td>
    <td>item.Vegetables.FR</td>
    <td>item.Vegetables.Gap</td>
    <td>item.Fruit.Ordered</td>
    <td>item.Fruit.Delivery</td>
    <td>item.Fruit.FR</td>
    <td>item.Fruit.Gap</td>
  </tr>
</tbody>

你可以看到正在工作的 jsBin here

【讨论】：

谢谢@Rohit Sharma。但是当另一个类别（如水果）可用时会发生什么。根据上面的结构我们要改代码。

那么你需要将类别存储在一个数组中并相应地制作动态标题。