如何在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"
        }
      ]
    }
  ]
}

我想将图形卡显示为如下表格：

  名称库存内存核心时钟
GTX 1080 10 11 GB 1500 MHz
 RX 580 8 8 GB 1366 MHz

和像这样的CPU：

    名称库存插座频率L3缓存
i5 7600K 8 LGA 1151 3.8 GHz 6 MB
锐龙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。

Answer 1

您可以动态生成值，然后将其绑定到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">

Answer 2

对于那些严格在模板中寻找解决方案的人，我在属性中使用了String?.prototype?.repeat()[columns]：

[columns]="'*, 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>