nativescript - 如何在 NativeScript 中嵌套 ListView

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

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

您可以在此处的 Playground 上查看:

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 中的 ScrollView ，如果你只是删除它，它会显示父列表每一行中的所有项目。

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

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

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