How to Nest List Views in NativeScript - 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.

Answer 2

As #Narendra mentioned it's not recommended to use nested list views or ngFor inside template.
I guess nativescript-accordion plugin will suit your needs, it basically supports the data structure you are looking for - List Item -> List of Items (Suit -> Cards). If you like to show the items expanded upon loading, all you have to do is, populate the selectedIndexes with all indexes. There is one issue with latest version of the plugin, which can be still handled with a simple math.
Preventing collapse upon tap is still an open feature request, but possible to achieve with an override. But as far I know, this plugin could be the only viable solution for nested list views.