Nativescript w / NG2：* ngFor循环在GridLayout中创建行

Question

我试图通过执行以下操作来制作我认为简单的表格：

<GridLayout rows="auto" columns="*,*,auto" width="100%" class="table-body">
  <Label col="0" row="0" text="Date"></Label>
  <Label col="1" row="0" text="Previous Owner"></Label>
  <Label col="2" row="0" text="Price" horizontalAlignment="center"></Label>
  <template *ngFor="let sale of history; let i = index">
    <Label col="0" row="{{i+1}} [text]="sale.saleDate"></Label>
    <Label col="1" row="{{i+1}} [text]="sale.username"></Label>
    <Label col="2" row="{{i+1}} [text]="sale.price" horizontalAlignment="center"></Label>
  </template>
</GridLayout>

我想创建的表的示例：

这段代码不起作用，但我认为它显示了我想要做的事情，有人建议我将*ngFor放在GridLayout标签内，但这不会起作用，因为它不会采取最大的sale.price来制作列宽度。

我很惊讶我找到任何帮助我的例子都很困难。任何帮助，将不胜感激。

Answer 1

一些建议 - 您可以尝试使用Angular绑定[row]="i"（在代码后面增加+1您的索引而不是绑定）。

尽管如此，整个想法可以用ListView来表示，here是虚拟化的，支持循环使用的盒子和项目模板。比ng结构指令更好的性能。 https://github.com/NativeScript/nativescript-sdk-examples-ng/blob/release/app/common-screens-category/lists-category/multi-line-grouped/multi-line-grouped.component.html很好地解释了更喜欢ListView而不是结构指令的原因

EG

qazxswpoi

Answer 2

虽然，现在回答这个问题为时已晚，但对于那些坚持到这里的人来说。

最好将标题本身作为数组的第一个元素放入数组中，并正常迭代GridLayout。