Вложенный список для многомерного массива - PullRequest
Новая
       1

Вложенный список для многомерного массива

0 голосов
/ 18 июня 2019

У меня есть json, где во многих командах много членов, и я не знаю, как отобразить его с помощью ListView.Я пробовал вложенный ListView, но цикл останавливается после одного члена.

Это структура json 

[
    {
        "name": "Red Team",
        "members": [
            {
                "name": "John",
                "role": "Member"
            },
            {
                "name": "Mike",
                "role": "President"
            }
            ...
        ]
    },
    {
        "name": "Green Team",
        "members": [
            {
                "name": "Alan",
                "role": "Member"
            },
            {
                "name": "Adam",
                "role": "President"
            }
            ...
        ]
    }
    ...
]

Это мой код 

<StackLayout>
    <Label class="message" text="Team" />
    <ListView for="teams in teamMembers">
        <v-template>
            <StackLayout>
                <Label :text="teams.name" />
                <ListView for="member in teams.members">
                    <v-template>
                        <Label :text="member.name" />
                    </v-template>
                </ListView>
            </StackLayout>
        </v-template>
    </ListView>
</StackLayout>

Есть идея?

Спасибо

1 Ответ

0 голосов
/ 27 июня 2019

Поскольку вы используете Nativescript-Vue, вы можете создавать собственные компоненты. Использование пользовательского компонента для создания шаблона для ваших участников.

IE. Шаблон в компоненте с командой поддержки: 

        <StackLayout>
            <Label :text="team.name" />
            <ListView for="member in team.members">
                <v-template>
                    <Label :text="member.name" />
                </v-template>
            </ListView>
        </StackLayout>

Тогда вы можете использовать это так: 

<StackLayout>
    <Label class="message" text="Team" />
    <ListView for="team in teamMembers">
        <v-template>
            <TeamMembers :team="team"/>
        </v-template>
    </ListView>
</StackLayout>

Я думаю, это будет работать в вашем случае.

...