多维数组的嵌套列表视图

Question

我有一个 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>

有什么想法吗？

谢谢

Answer 1

由于您使用的是 Nativescript-Vue，因此您可以创建自定义组件。使用自定义组件为您的会员创建模板。

即。道具团队组件中的模板：

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

我认为这适用于你的情况。

Answer 2

我解决了中间页面的团队，然后是团队成员的页面。

多维数组的嵌套列表视图

Nested listview for multidimensional array

listview

nativescript-vue