Nativescript ж/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

Некоторые предложения - вы можете попробовать использовать угловое привязку [row]="i" (приращение +1 ваш индекс в коде, а не в привязке).

Тем не менее, вся идея может быть представлена ​​с помощью 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