首页 文章

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

提问于
浏览 次
2

我正在尝试在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

我已经尝试使用GridLayout RadListView，但不能这样做 . 如果所有类别的规范计数都是常量，我可以轻松创建具有常量列数的GridLayout，如下所示：

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

但是任意数量的规格让我在这里遇到了挑战 .

NativeScript Angular中是否有某种方法可以实现这一目标？我正在使用4.1.0版本的NativeScript .

nativescript angular2-nativescript

1 回答

  • 2

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

    回复于

相关问题