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每個項目中的多個數組

回答

相關問題