Nativescript с NG2: цикл *ngFor для создания строк в GridLayout

Я пытаюсь сделать то, что, как я думал, будет простой таблицей, выполнив следующие действия:

<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 ширина.

Я очень удивлен, что мне так трудно найти какие-либо примеры, которые помогут мне в этом. Любая помощь будет оценена по достоинству.


nativescript angular tabular ngfor grid-layout
person sl1der    schedule 14.02.2017    source источник

Ответы (2)


arrow_upward
2
arrow_downward

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

Тем не менее, всю идею можно представить с помощью ListView, который виртуализирован, поддерживает переработку готовых шаблонов и шаблонов элементов.. более высокая производительность, чем структурные директивы ng. Причина предпочтения ListView вместо структурных директив хорошо объяснена ="nofollow noreferrer">здесь

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

person Nick Iliev    schedule 15.02.2017

arrow_upward
0
arrow_downward

Хотя, Слишком поздно отвечать на вопрос, Но для того, кто здесь застрял.

Было бы лучше поместить сам заголовок в массив в качестве первого элемента массива и выполнить итерацию GridLayout в обычном режиме.

person Mr-K10    schedule 06.03.2019