How to Nest List Views in NativeScript

Question

I'm trying to display a list of items within a list of items. Basically it's a card game, where each suit is being repeated, and then each card for each suit is being repeated.

<StackLayout margin="10 0 60 0" padding="0 0">
    <ListView class="list-group" [items]="hand" (itemTap)="onItemTap($event)"
        (itemLoading)="onItemLoading($event)" backgroundColor="#26252A"
        style="height:100%">
        <ng-template let-suit="item">
            <FlexboxLayout flexDirection="row">
                <ScrollView orientation="horizontal">
                        <StackLayout height="100" orientation="horizontal" margin="2.5, 15">
                            <ListView class="list-group" [items]="suit.cards">
                                <ng-template let-card="item">
                                    <Label [text]="card" class="card"></Label>
                                </ng-template>
                        </ListView>
                    </StackLayout>
                </ScrollView>
            </FlexboxLayout>
        </ng-template>
    </ListView>
</StackLayout>

And this is what my "hand" looks like:

hand: { suit: Suit, fontColor: Color, cards: string[] }[] = [
    { suit: "Red", fontColor: new Color("red"), cards: ["14", "13"] },
    { suit: "Green", fontColor: new Color("green"), cards: ["14", "13", "12", "9"] },
    { suit: "Yellow", fontColor: new Color("yellow"), cards: ["14", "13", "10", "9"] },
    { suit: "Black", fontColor: new Color("black"), cards: ["14", "13", "9"] }
];

When I run it though, I'm only getting the very first card in each suit to be displayed.

You can check it out at the playground here:

https://play.nativescript.org/?template=play-ng&id=XfogFt&v=3

(I'm new to both NaitiveScript and Angular, so I may be missing something simple)

Answer 1

EDIT: It is not advisable to use nested listview as this would break the recycling and virtualization for cells that are containing a nested listview

You don't need a scrollview inside the ng-template, if you just remove it, it will show your all the items in each row of parent list.

<ListView class="list-group" [items]="hand" (itemTap)="onItemTap($event)"
          (itemLoading)="onItemLoading($event)" backgroundColor="#26252A"
          style="height:100%">
    <ng-template let-suit="item">
        <FlexboxLayout flexDirection="row">
            <!-- <ScrollView orientation="horizontal"> -->
                    <StackLayout height="100" orientation="horizontal" margin="2.5, 15">
                        <ListView class="list-group" [items]="suit.cards">
                            <ng-template let-card="item">
                                <Label [text]="card" class="card"></Label>
                            </ng-template>
                    </ListView>
                </StackLayout>
            <!-- </ScrollView> -->
            <Label text="Label"></Label>
        </FlexboxLayout>
    </ng-template>
</ListView>

I have updated the playground here. You can also use the itemHeight and itemWidth properties here for size tuning.

P.S. The itemHeight and itemWidth properties are iOS specific. If not used, items are sized dynamically depending on the data coming from the source.