Nativescript 使用中继器多键值答案

【问题标题】：Nativescript using repeater multiple key valueNativescript 使用中继器多键值
【发布时间】：2015-11-04 01:04:45
【问题描述】：

我正在尝试使用中继器来显示 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>

结果是：

【问题讨论】：

标签： javascript android ios repeater nativescript

【解决方案1】：

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

已编辑：添加了orientation="horizontal"

<ScrollView>
  <StackLayout cssClass="bodyPilihProduk">

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

  </StackLayout>
</ScrollView>

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

iOS

安卓

【讨论】：

结果只显示 {{value}} 个项目。 {{item}} 未显示。
奇怪。在 android 模拟器中仍然只显示 {{value}} 项。
我正在尝试使用 ListView，它可以工作 ` `
@Dilar 很高兴听到这个消息。而且，据我所知，这段代码应该是有效的。
您也可以尝试将标签放在 StackLayout 中。

【解决方案2】：

使用一 (1) 个中继器并在其中打印两个标签。由于您有两个项目，您需要将它们包装在某种layout 中。要一个接一个地打印它们，带有orientation="horizontal" 的 StackLayout 就足够了。

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

任何layout 都可以，这是一个使用 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>

【讨论】：