ng-template ngFor not repeating within layouts

[tsonevn]

From @x00 on May 6, 2017 13:11

Android / Nativescript 3.0

        <StackLayout>
            <ng-template ngFor let-index [ngForOf]="[1,2,3,4]">
            <Label [text]="'This is Label' + index"></Label>
            </ng-template>
        </StackLayout>

yield only This is Label 1, where as

        <StackLayout>
            <Label text="This is Label 1"></Label>
            <Label text="This is Label 2"></Label>
            <Label text="This is Label 3"></Label>
            <Label text="This is Label 4"></Label>
        </StackLayout>

should have the same result.

this is true is grid wrap and other layouts.

It is also true if you use the depreciated template. It was working prior to update.

Copied from original issue: NativeScript/NativeScript#4133

[tsonevn]

From @x00 on May 6, 2017 13:31

        <StackLayout>
            <Label [text]="'This is Label' + index" *ngFor="let index of [1,2,3,4]"></Label>
        </StackLayout>

works correctly but does help if you need a template.

[tsonevn]

From @x00 on May 6, 2017 18:20

I can confirm this with fresh angular app

[tsonevn]

Hi @x00,
Thank you for reporting this issue.
I tested the above-mentioned scenario and unfortunately have to confirm that this is a real issue for both iOS and Android while using ng-template in NativeScript Angular 2 project.
I am attaching sample project, where this could be reproduced.

Archive.zip

In the meantime, you could use StackLayout as a template and attach to it ngFor directive. For example:

 <StackLayout>
        <StackLayout height="50" *ngFor="let index of [1,2,3,4]">
            <Label [text]="'This is Label' + index" ></Label>
        </StackLayout>
</StackLayout>

[x00]

@tsonevn Thank you for the workaround

[sis0k0]

fixed with #785

[davidjonz2005]

are you sure ? because now i have the same problem

[steadycoding]

None of these display the columns horizontally. The last one only displays the first column.
<StackLayout orientation="horizontal" *ngFor="let col of columns"> <Label [text]="col"></Label> </StackLayout>

<StackLayout orientation="horizontal"> <ListView [items]="columns" class="list-group"> <ng-template let-item="item" let-odd="odd" let-even="even"> <Label [text]="item" class="list-group-item"></Label> </ng-template> </ListView> </StackLayout>

<GridLayout rows="auto, auto, auto, auto" columns="auto, auto, auto, auto"> <ListView [items]="columns"> <ng-template let-item="item" let-i="index"> <Label row="0" col="i" text="{{item + i}}"></Label> </ng-template> </ListView> </GridLayout>