CODEWITHSUNDEEP
angularnativescriptgrid-layouttabularngfor
sl1der
sl1der

Reputation: 136

Nativescript w/ NG2: *ngFor loop to create rows in a GridLayout

I am trying to make what I thought would be a simple table by doing the following:

<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>

Sample of table I would like to create:

This code does not work but I think it shows what I am trying to do, it has been suggested to me to put the *ngFor inside the GridLayout tag but that won't work as it won't take the largest sale.price to make the column width.

I am quite surprised I am having such difficulty finding any examples to help me with this. Any help would be appreciated.

Upvotes: 1

Views: 2366

Answers (2)

Mr-K10
Mr-K10

Reputation: 345

Although, It's too late to answer the question, But for someone who stuck here.

It would be better to put the heading itself into the array as the first element of the array and iterate the GridLayout normally.

Upvotes: 0

Nick Iliev
Nick Iliev

Reputation: 9670

Some suggestions - you can try using the Angular binding [row]="i" (increment +1 your index in the code behind rather than in the binding).

Still, the whole idea can be represented with ListView which is virtualized, supports recycling out-fo-the-box and item templates.. better performance than the ng structural directives. The reason to prefer ListView instead of structural directives is well explained 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

Upvotes: 2

Related Questions