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，因此可以创建自定义组件。使用自定义组件为您的成员创建模板。

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>

我认为这可以解决您的情况。

Answer 2

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

多维数组的嵌套列表视图

2 个答案: