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

【问题标题】：Nativescript w/ NG2: *ngFor loop to create rows in a GridLayoutNativescript w/ NG2：*ngFor 循环在 GridLayout 中创建行
【发布时间】：2019-03-07 07:59:33
【问题描述】：

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

<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 使列宽。

我很惊讶我很难找到任何例子来帮助我解决这个问题。任何帮助将不胜感激。

【问题讨论】：

标签： angular nativescript grid-layout tabular ngfor

【解决方案1】：

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

不过，整个想法可以用ListView 表示，它是虚拟化的，支持回收开箱即用和项目模板.. 比 ng 结构指令具有更好的性能。更喜欢 ListView 而不是结构指令的原因很好解释here

例如

https://github.com/NativeScript/nativescript-sdk-examples-ng/blob/release/app/common-screens-category/lists-category/multi-line-grouped/multi-line-grouped.component.html

【讨论】：

【解决方案2】：

虽然，现在回答这个问题已经太晚了，但是对于困在这里的人来说。

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

【讨论】：