Javascript 使用repeater多键值的Nativescript

我试图使用repeater显示json数据。但结果和我想要的不一样。我想要的是在值之后显示的项目。在该项显示全部后不显示全部值

以下是page.bindingContext：

page.bindingContext = {
"myItems": [
    {
        "value": "100",
        "item": "Car"
    },
    {
        "value": "200",
        "item": "Motor"
    },
    {
        "value": "300",
        "item": "Boat"
    }
]
};

下面是xml模板：

<ScrollView>
  <StackLayout cssClass="bodyPilihProduk">

  <Repeater items="{{ myItems }}" style="font-size:12;">
     <Repeater.itemTemplate>
        <Label text="{{value}}" margin="10" />
     </Repeater.itemTemplate>
  </Repeater>

  <Repeater items="{{ myItems }}" style="font-size:20;">
     <Repeater.itemTemplate>
        <Label text="{{ item }}" margin="10" />
     </Repeater.itemTemplate>
  </Repeater>

  </StackLayout>
</ScrollView>

结果是：

---

一次使用Repeater，然后打印两个项目怎么样

编辑：添加方向=“水平”

现在，您可以同时显示项目和值

iOS

安卓

使用一（1）个转发器并在其中打印两个标签。由于您有两个项目，您需要将它们包装成某种形式。要将它们依次打印，使用

orientation=“horizontal”

的StackLayout就足够了

<ScrollView>
    <Repeater items="{{ myItems }}">
        <Repeater.itemTemplate>
            <StackLayout orientation="horizontal">
                <Label text="{{ item }}" />
                <Label text="{{ value }}" />
            </StackLayout>
        </Repeater.itemTemplate>
    </Repeater>
</ScrollView>

任何方法都可以，下面是一个使用GridLayout的示例，它将为您提供一个更具表格外观的两列，第一列中的项目和第二列中的值

<ScrollView>
    <Repeater items="{{ myItems }}">
        <Repeater.itemTemplate>
            <GridLayout columns="4*, 1*">
                <Label col="0" text="{{ item }}" />
                <Label col="1" text="{{ value }}" />
            </GridLayout>
        </Repeater.itemTemplate>
    </Repeater>
</ScrollView>

结果仅显示{{value}}项。{{item}}未显示。奇怪。在android emulator中仍然只显示{{value}}项。我正在尝试使用ListView，它可以工作，`@Dilar很高兴听到这个消息。而且，据我所知，这段代码应该是可行的。你也可以尝试将标签放置在堆栈布局中。

<ScrollView>
    <Repeater items="{{ myItems }}">
        <Repeater.itemTemplate>
            <GridLayout columns="4*, 1*">
                <Label col="0" text="{{ item }}" />
                <Label col="1" text="{{ value }}" />
            </GridLayout>
        </Repeater.itemTemplate>
    </Repeater>
</ScrollView>