Динамическая таблица столбцов в угловых скриптах js + Type - PullRequest
Новая
       10

Динамическая таблица столбцов в угловых скриптах js + Type

0 голосов
/ 29 июня 2018

Я хочу создать следующую динамическую таблицу столбцов, используя anguler js.

enter image description here

Согласно моему требованию, наборы столбцов, такие как фрукты, овощи, могут динамически изменяться в соответствии с наборами данных. Я хочу загрузить данные из файла 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 Ответ

0 голосов
/ 29 июня 2018

Вам нужно сделать структуру таблицы следующим образом: 

<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 здесь

...