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标记内，但是因为它赢了而不会工作＃＆＃ 39; t取最大sale.price来制作列宽。

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

Answer 1

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

尽管如此，整个想法可以用ListView来表示，它是虚拟化的，支持回收现成的和项目模板。比ng结构指令更好的性能。我更好地解释了更喜欢ListView而不是结构指令的原因here

e.g。

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

Answer 2

尽管，回答这个问题为时已晚，但是对于困在这里的人。

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

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

2 个答案: