Как создать таблицу в NativeScript с динамическим количеством строк и столбцов? - PullRequest
Новая
       10

Как создать таблицу в NativeScript с динамическим количеством строк и столбцов?

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

Я пытаюсь создать таблицу или таблицу данных с динамическим количеством строк и столбцов в моем приложении NativeScript. У меня есть некоторые категории продуктов и некоторые продукты в этих категориях. Продукты имеют некоторые характеристики в отношении своей категории. Вот пример JSON для продуктов в категории графических карт: 

{
  "parts": [
    {
      "id": 1,
      "name": "GTX 1080",
      "stockCount": 10,
      "specifications": [
        {
          "id": 1,
          "name": "Memory",
          "value": "11 GB"
        },
        {
          "id": 2,
          "name": "Core Clock",
          "value": "1500 MHz"
        }
      ]
    },
    {
      "id": 2,
      "name": "RX 580",
      "stockCount": 8,
      "specifications": [
        {
          "id": 1,
          "name": "Memory",
          "value": "8 GB"
        },
        {
          "id": 2,
          "name": "Core Clock",
          "value": "1366 MHz"
        }
      ]
    }
  ]
}

Вот еще один пример в категории CPU: 

{
  "parts": [
    {
      "id": 3,
      "name": "i5 7600K",
      "stockCount": 8,
      "specifications": [
        {
          "id": 3,
          "name": "Socket",
          "value": "LGA 1151"
        },
        {
          "id": 4,
          "name": "Frequency",
          "value": "3.8 GHz"
        },
        {
          "id": 5,
          "name": "L3 Cache",
          "value": "6 MB"
        }
      ]
    },
    {
      "id": 4,
      "name": "Ryzen 7 1700",
      "stockCount": 15,
      "specifications": [
        {
          "id": 3,
          "name": "Socket",
          "value": "AM4"
        },
        {
          "id": 4,
          "name": "Frequency",
          "value": "3.0 GHz"
        },
        {
          "id": 5,
          "name": "L3 Cache",
          "value": "16MB"
        }
      ]
    }
  ]
}

Я хочу показать графические карты в виде таблицы: 

  Name     Stock    Memory    Core Clock
GTX 1080     10      11 GB     1500 MHz
 RX 580       8       8 GB     1366 MHz

и процессоры, подобные этому: 

    Name      Stock    Socket    Frequency    L3 Cache
i5 7600K         8    LGA 1151    3.8 GHz        6 MB
Ryzen 7 1700    15    AM4         3.0 GHz       16 MB

Я пробовал RadListView с GridLayout, но не могу этого сделать. Если бы спецификация для всех категорий была бы постоянной, я мог бы легко создать GridLayout с постоянным количеством столбцов, например: 

<GridLayout columns="*, auto, auto, auto, auto">...</GridLayout>

Но произвольное количество спецификаций ставит меня перед проблемой.

Есть ли какой-нибудь способ в NativeScript Angular для достижения этой цели? Я использую 4.1.0 версию NativeScript.

Ответы [ 2 ]

0 голосов
/ 08 июня 2019

Для тех, кто ищет решение строго в шаблоне, я использовал String .prototype .repeat () в атрибуте [columns]:

[colums]="'*, auto' + ', auto'.repeat(parts.specifications.length)"

Полный пример: 

<GridLayout [colums]="'*, auto, ' + 'auto, '.repeat(parts.specifications.length)">
    <Label col="0" [text]="parts.name"></Label>
    <Label col="1" [text]="parts.stockCount"></Label>
    <Label [col]="i" [text]="spec.value" *ngFor="let spec of parts.specifications; let i=index+2"></Label>
</GridLayout>
0 голосов
/ 24 июня 2018

вы можете генерировать значение динамически, а затем связывать его со свойством GridLayout cloumns примерно так 

<GridLayout [columns]="genCols(item)">

& 

genCols(item){
    if(item.columns){
      return item.columns;
    }else{
      item.columns="*, auto";
      item.specifications.forEach((el)=>{
        item.columns+=",auto";
      })
      return item.columns
    }
}

если пользователи могут добавлять спецификации и количество спецификаций для каждого элемента одинаково, тогда проще будет использовать одну переменную и установить ее значение в ngOnInit, а затем обновить его в спецификации, добавленной как columns=genCol(items[0]), а затем <GridLayout [columns]="columns">

...