如何使用动态行数和列数在 NativeScript 中创建 table？

Question

我正在尝试在我的 NativeScript 应用程序中创建一个 table 或具有动态行数和列数的数据网格。我有一些产品类别和这些类别中的一些产品。产品有一些关于其所属类别的规格。以下是显卡类别产品的示例 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"
        }
      ]
    }
  ]
}

我想像这样 table 显示显卡：

  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

我已经尝试使用 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

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

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

如何使用动态行数和列数在 NativeScript 中创建 table？

How to create a table in NativeScript with dynamic row and column count?

nativescript

angular2-nativescript