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

虽然我运行它，但我只获得了每套西装中的第一张卡片。

您可以在这里的操场上查看：

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

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

Answer 1

编辑：建议不要使用嵌套列表视图，因为这样会破坏包含以下内容的单元的回收和虚拟化嵌套列表视图

您无需在ng-template内添加滚动视图，只需将其删除即可在父列表的每一行显示所有项目。

我已经更新了游乐场here。您还可以在此处使用itemHeight和itemWidth属性进行大小调整。

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

Answer 2

正如@Narendra所说，不建议在模板内使用嵌套列表视图或ngFor。

我猜想nativescript-accordion插件会满足您的需求，它基本上支持您要查找的数据结构-列表项->项目列表（Suit->卡）。如果要显示加载时扩展的项目，您要做的就是用所有索引填充selectedIndexes。 one issue带有最新版本的插件，仍然可以通过简单的数学运算来处理。

轻按

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

如何在NativeScript中嵌套列表视图

2 个答案: