多维数组的嵌套列表视图答案

【问题标题】：Nested listview for multidimensional array多维数组的嵌套列表视图
【发布时间】：2019-06-18 15:00:15
【问题描述】：

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

有什么想法吗？

谢谢

【问题讨论】：

如果每个团队的成员数量限制为不多，我会放弃嵌套列表视图，只需在 v-template 内的成员名称标签上放置一个 v-for。跨度>
mmmm...我可以尝试...但是您认为我可以使用 RadListView 插件获得相同的结果吗？

标签： listview nativescript-vue

【解决方案1】：

由于您使用的是 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>

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

【讨论】：

【解决方案2】：

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

【讨论】：