GridLayout ngfor столбец строки

Question

Я новичок в Nativescript и у меня проблема с ngFor.У меня есть этот GridLayout внутри StackLayout с ngFor, вопрос, как установить динамический столбец и строку внутри StackLayout?Thans.

<GridLayout columns="*,*,*" rows="{{ totalRows }}" class="grid-book">
   <StackLayout *ngFor="let plan of plans; let i = index" row="0" col="0" horizontalAlignment="stretch">
      <StackLayout height="150" class="book">
         <AbsoluteLayout height="150">
            <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
            <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
         </AbsoluteLayout>
      </StackLayout>
      <Label text="{{ plan.name }}"></Label>
   </StackLayout>
</GridLayout>

Answer 1

В этом случае вы можете использовать index, поскольку вы его назначаете i.Я проверил приведенный ниже случай в моем html.

<GridLayout columns="*,*,*"  class="grid-book">
  <StackLayout *ngFor="let plan of plans; let i = index" row="{{i}}" col="0" horizontalAlignment="stretch">
    <StackLayout height="150" class="book">
      <AbsoluteLayout height="150">
        <StackLayout width="100%" left="0" top="0" height="100%" class="orange internal-book"></StackLayout>
        <Label text="" left="70" top="0" width="5" height="100%" backgroundColor="white"></Label>
      </AbsoluteLayout>
    </StackLayout>
    <Label text="{{ plan.name }}"></Label>
  </StackLayout>
</GridLayout>

и в моем файле .ts plans = [{ 'name': 'Name 1' }, { 'name': 'Name 2' }, { 'name': 'Name 3' }];

, и если вы видите вывод с использованием отладчика

Answer 2

Вы можете использовать привязку свойств к строкам / столбцам, чтобы сохранить их динамичность.Но вы легко столкнетесь с проблемами производительности, если у вас так много делений в GridLayout (например, 20 или 25+).

По моему мнению, вы должны использовать StackLayout, чтобы складывать элементы рядом друг с другом в вертикальной ориентации и использоватьGridLayout внутри каждого элемента, чтобы разделить столбцы.Также я бы порекомендовал использовать ListView вместо ngFor, если это возможно.

Answer 3

У вас есть фиксированное количество столбцов (3) и неограниченное количество строк (totalRows).Вместо того, чтобы заполнять один большой GridLayout, я бы предложил создать StackLayout с ng для вашего внешнего макета и поместить GridLayout с 1 строкой и 3 столбцами внутри этого шаблона цикла.

Примерно так:

<StackLayout *ngFor="let plan of plans">
    <GridLayout rows="*" columns="* * *">
        <Label text="A" col="0"></Label>
        <Label text="B" col="1"></Label>
        <Label text="C" col="2"></Label>
    </GridLayout>
</StackLayout>

После того, как у вас будет работать базовый цикл и макет, вы можете заменить метки собственным шаблоном для каждой ячейки.Если вы используете эту технику Grid-inside-Stack, вам не понадобится значение i / index или значение строки totalRows.