如何在 NativeScript 中嵌套列表视图

Question

我正在尝试显示项目列表中的项目列表。基本上这是一种纸牌游戏，每套花色都被重复，然后每套花色的每张牌都被重复。

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

这就是我的 "hand" 的样子：

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"] }
];

当我运行它时，我只会显示每套花色中的第一张牌。

您可以在此处的操场上查看：

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

（我是 NaitiveScript 和 Angular 的新手，所以我可能遗漏了一些简单的东西）

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

您不需要在 ng-template 中使用滚动视图，如果您只是将其删除，它将显示父列表每一行中的所有项目。

我已经更新了 playground here。您还可以在此处使用 itemHeight 和 itemWidth 属性来调整大小。

P.S。 itemHeight 和 itemWidth 属性是 iOS 特定的。如果不使用，项目将根据来自源的数据动态调整大小。

Answer 2

正如@Narendra 提到的，不建议在模板中使用嵌套列表视图或 ngFor。

我猜想 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 使用最新版本的插件，仍然可以通过简单的数学运算来处理。

Preventing collapse 点击后仍然是一个开放的功能请求，但可以通过覆盖来实现。但据我所知，这个插件可能是嵌套列表视图的唯一可行解决方案。

如何在 NativeScript 中嵌套列表视图

How to Nest List Views in NativeScript

nativescript

nativescript-angular