Question

我有一些来自外部API的数据。它返回嵌套数组，如下所示：

var myData = [
    {
        "id": 30,
        "type": "Product",
        "name": "Product Name",
        "children": {
            "661031278126991": {
                "id": 45,
                "type": "Releases",
                "name": "2019",
                "parent": 30,
                "children": {
                    "6611311403631192": {
                        "id": 12,
                        "type": "Features",
                        "name": "Clients",
                        "parent": 80,
                        "children": {
                            "66103580432771": {
                                "id": 80,
                                "type": "Tasks",
                                "name": "List",
                                "parent": 12
                            },
                            "66103144161527": {
                                "id": 45,
                                "type": "Tasks",
                                "name": "List B",
                                "parent": 12
                            }
                        }
                    }
                }
            }
        }
    }
];

问题是例如我有多个“任务”，但现在我卡住了。我什至不知道是否有可能根据这些数据创建视图。

下面，我粘贴了一些XML代码，这些代码肯定行不通，但这将有助于解释我要呈现哪种布局。我只是希望Repeater可以以某种方式呈现它。谢谢您的任何建议。

<Repeater items="{{ myData }}">
                    <Repeater.itemTemplate>
                        <StackLayout>
                            <StackLayout class="sep">
                                <Label text="{{ type }}" class="item"></Label>
                            </StackLayout>
                            <StackLayout class="sep">
                                <Label text="{{ children.name }}" class="item"></Label>
                                <StackLayout class="sep">
                                    <Label text="{{ children.children.name }}" class="item"></Label>
                                    <StackLayout class="sep">
                                        <Label text="{{ children.children.children.name }}" ></Label>
                                    </StackLayout>
                                </StackLayout>
                            </StackLayout>
                        </StackLayout>
                    </Repeater.itemTemplate>
                </Repeater>

Answer 1

Repeater不适用于对象，因此您将必须遍历children对象并将键值对转换为Array。

然后，您将必须构建一个自定义组件，将其自身包含在Repeater中，以便可以将所有子元素一个接一个地呈现。

父组件

<ScrollView>
  <Repeater items="{{ myData }}">
   <Repeater.itemTemplate>
     <comps:child-component></comps:child-component>
   </Repeater.itemTemplate>
 </Repeater>

子组件

<StackLayout xmlns:comps="components">
    <Label text="{{ name }}" class="m-y-10 m-x-10 h3"></Label>
    <Repeater items="{{ children }}">
        <Repeater.itemTemplate>
            <comps:child-component></comps:child-component>
        </Repeater.itemTemplate>
    </Repeater>
</StackLayout>

这里是Playground Sample。

注意：：如果您打算渲染100个这种类型的阵列，则必须考虑采用其他方法来避免性能下降。可能是您可以使用ListView加载第一级项目，然后在下一个屏幕中点击加载第二级项目。

Nativescript-具有嵌套数据的中继器

1 个答案: