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

Posted 2023-02-19

【中文标题】如何在 NativeScript 中创建具有动态行数和列数的表？

【英文标题】：How to create a table in NativeScript with dynamic row and column count?

【发布时间】：2018-12-02 23:02:44

【问题描述】：

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

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

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

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

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

【问题讨论】：

您的问题不清楚。您是说规格计数不是恒定的，但在您的示例中看起来是恒定的，例如显卡有 2 个内存和核心时钟，cpu 有 3 个插槽、频率和 L3 缓存。那么这里的问题是什么？还添加一些代码sn-p你做了什么和你想要实现的目标

如果 CPU 和显卡是不同的列表，则使用各自的代码创建 2 个不同的列表。

@bhavinjalodara 我认为这很明显，但我想并非如此：我有一个管理面板，用户可以在其中向当前类别添加新规范。例如，用户可以在 Graphic Cards 类别中添加“内存时钟”规范，那么显卡将有 3 个规范而不是 2 个。如果我设计的页面具有恒定的列数，那么我需要每次用户发布一个客户端添加了一个新的规范。用户还可以添加更多类别，从而使“具有各自代码的 2 个不同列表”解决方案无用。

【参考方案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">

【讨论】：

这真是太棒了，我一直在寻找。谢谢！这个答案的另一个有用方面是我意识到可以在 XML 中的属性周围使用方括号并在 TypeScript 中计算该属性。

【参考方案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>