Question

我正在使用Nativescript ListView并拥有4个阵列。

//name array
        for (var i = 0; i < employeesJson2.length; i++) {
            empNameArray.push(employeesJson2[i].Name)
        }

        // image array
        for (var i = 0; i < employeesJson2.length; i++) {
            empImageArray.push(employeesJson2[i].Image)
        }
        // phone array
        for (var i = 0; i < employeesJson2.length; i++) {
            empPhoneArray.push(employeesJson2[i].Phone)
        }
        // email array
        for (var i = 0; i < employeesJson2.length; i++) {
            empEmailArray.push(employeesJson2[i].Email)
        }

我需要能够在1个列表视图行中使用这4个数组。

目前我只是

<StackLayout orientation="vertical">
     <ListView items="{{ empNameArray }}" id="rolePicker" itemTap="listViewRoleTap" style="text-align: center" rowHeight="50">
      <ListView.itemTemplate>
          <Label text="{{ $value }}" textWrap="true" style="padding-top: 10; font-size: 19"  />
      </ListView.itemTemplate>
    </ListView>
   </StackLayout>

如果我添加另一个listview项目，它不会显示。理想情况下，项目将并排显示在同一行中。我错过了一步吗？我应该组合阵列吗？如果是这样，怎么样？

Answer 1

每个列表视图模板只能有一个根元素。也就是说，如果你想要想象，让我们说两个或三个标签，那么你需要在容器布局中包装。

e.g。

  <ListView.itemTemplate>
      <StackLayout>
          <Label text="first label" />
          <Label text="{{ $value }}" />
          <Label text="third label" />
      </StackLayout>
  </ListView.itemTemplate>

另一件事 - 为什么迭代一个数组以创建另外四个数组？如果您的业务逻辑允许，那么您只需将数组与JSON对象一起使用即可填充列表视图。

$ value 提供的是一种绑定到不像字符串这样的复杂对象的值的简单方法。因此，如果您的数组项目属于以下类型

var myArray = ["ab", "cd", "ef"];

然后您可以像示例中一样使用 $ value 来呈现当前项目的每个值。 e.g。

<ListView items="{{ myArray }}">
  <ListView.itemTemplate>
      <Label text="{{ $value }}"  />
  </ListView.itemTemplate>
</ListView>

但是，据我所知，对象属于以下类型：

var myArrayItem = { "name": "John", 
                    "image": "some-image-path", 
                    "phone": 123456, 
                    "email": "abv@xyz.com" };

因此，如果您想迭代并可视化您的不同键值，那么您可以访问绑定中的键，例如。

<ListView items="{{ employeesJson2 }}">
  <ListView.itemTemplate>
      <StackLayout>
          <Label text="{{ name }}"  />
          <Image src="{{ image }}"  />
          <Label text="{{ phone }}"  />
          <Label text="{{ email }}"  />
      </StackLayout>
  </ListView.itemTemplate>
</ListView>

Nativescript listview每个项目中的多个数组

1 个答案: