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 Clock
GTX 1080     10      11 GB     1500 MHz
 RX 580       8       8 GB     1366 MHz

和类似这样的CPU：

    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

我已经尝试了RadGrid和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

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

[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>

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

2 个答案: