Я пытаюсь отобразить список элементов в списке элементов. По сути, это карточная игра, в которой повторяется каждая масть, а затем повторяется каждая карта для каждой масти.

<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, поэтому мне может не хватать чего-то простого)

3
Daryl 3 Янв 2019 в 02:15

2 ответа

Лучший ответ

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

Вам не нужен scrollview внутри 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 для настройки размера.

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

3
Narendra 3 Янв 2019 в 03:07

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

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

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

1
Manoj 3 Янв 2019 в 05:43