nativescript - 如何在 NativeScript 中创建具有动态行数和列数的表？

Question

我正在尝试在我的 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 ClockGTX 1080     10      11 GB     1500 MHz RX 580       8       8 GB     1366 MHz

and CPUs like this:

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

I have tried RadListView with GridLayout but cannot do this. If specification count for all categories would be constant, I could easily create GridLayout with constant number of columns like this:

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

但是任意数量的规范让我在这里面临挑战。

NativeScript Angular 中有什么方法可以实现这一点吗？我使用的是 4.1.0 版本的 NativeScript。

Answer 1

您可以动态生成值，然后将其绑定(bind)到类似这样的 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">