Как вложить представления списка в 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: { 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

Как упомянул @Narendra, не рекомендуется использовать вложенные представления списка или ngFor внутри шаблона.

Полагаю, nativescript-accordion плагин подойдет для ваших нужд, он в основном поддерживает искомую структуру данных - List Item -> List of Items (Suit -> Cards). Если вы хотите показать элементы, развернутые после загрузки, все, что вам нужно сделать, это заполнить selectedIndexes всеми индексами. Существует одна проблема с последней версией плагина, которую можно решить с помощью простой математики.

Предотвращение свертывания при нажатии остается открытым запросом, но его можно выполнить с помощью переопределения. Но, насколько я знаю, этот плагин может быть единственным жизнеспособным решением для вложенных представлений списка.

Answer 2

РЕДАКТИРОВАТЬ: не рекомендуется использовать вложенный просмотр списка, так как это может нарушить рециркуляцию и виртуализацию для ячеек, содержащих вложенный просмотр списка

Вам не нужен прокрутка внутриng-template, если вы просто удалите его, он покажет все ваши элементы в каждой строке родительского списка.

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

Я обновил игровую площадку здесь .Вы также можете использовать свойства itemHeight и itemWidth для настройки размера.

PS Свойства itemHeight и itemWidth зависят от iOS.Если элементы не используются, их размер изменяется динамически в зависимости от данных, поступающих из источника.