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

我正在使用Nativescript ListView并有4个数组。Nativescript listview每个项目中的多个数组

//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项。理想情况下，这些项目将在同一行中并排显示。我错过了一个步骤？我应该组合阵列吗？如果是这样，怎么样？

来源

2017-04-24 TheDizzle

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

例如

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

另一件事 - 为什么迭代一个数组来创建四个额外的数组？如果您的业务逻辑允许，那么您可以简单地使用带有JSON对象的数组来填充您的列表视图。

什么$值提供的是一种简单的方法来绑定到不是像字符串的复杂对象的值。所以，如果你的数组项是以下一种

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

，那么你可以在你的例子使用$值像呈现每个当前项目的价值。例如

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

但是，据我了解你的情况，对象是以下一种：

var myArrayItem = { "name": "John", 
        "image": "some-image-path", 
        "phone": 123456, 
        "email": "[email protected]" };

所以，如果你想要遍历和可视化不同的键值，那么你可以做到这一点访问您的绑定中的密钥，例如

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

来源

2017-04-25 08:57:36

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

回答

相关问题