Angular2/Nativescript：使用Nativescript的ListView複製HTML表格的問題

我忙於一個Angular2/Nativescript項目，我試圖複製一個HTML表格......我的方式是將兩個模板添加到ListView，一個用於標題，另一個用於從REST API獲取的內容，並且總是不同的。我唯一的問題是這種方法是左對齊的標題和內容，現在的列不是開始正好在他們的標題下，但有點向右，所以有點混淆搞清楚哪一列屬於哪個標題。在Nativescript中可以做到這一點嗎？我也無法弄清楚如何添加邊框來分隔我的表格/列表視圖的不同行和單元格......任何想法我可以怎麼做呢？Angular2/Nativescript：使用Nativescript的ListView複製HTML表格的問題

我的代碼：

<ListView [items]="stockTransactions" [itemTemplateSelector]="templateSelector" class="list-group" backgroundColor="green"> 
     <template nsTemplateKey="header" let-header="item"> 
      <GridLayout rows="auto" columns="auto, *, *,, *" class="list-group"> 
       <Label row="0" col="0" class="list-group-item" [text]="header.item1"></Label> 
       <Label row="0" col="1" class="list-group-item bg-primary" [text]="header.item2"></Label> 
       <Label row="0" col="2" class="list-group-item bg-primary" [text]="header.item3"></Label> 
       <Label row="0" col="3" class="list-group-item bg-primary" [text]="header.item4"></Label> 
      </GridLayout> 
     </template> 
     <template nsTemplateKey="cell" let-stockTransaction="item"> 
      <GridLayout rows="auto" columns="*, *, *, *"> 
       <Label row="0" col="0" textWrap="true" [text]="stockTransaction.Date | date" class="bg-primary list-group-item"></Label> 
       <Label row="0" col="1" textWrap="true" [text]="stockTransaction.TransactionType_Name" class="list-group-item"></Label> 
       <Label row="0" col="2" textWrap="true" [text]="stockTransaction.SupplierMaster_Name" class="list-group-item"></Label> 
       <Label row="0" col="3" textWrap="true" [text]="stockTransaction.Qty" class="list-group-item"></Label> 
      </GridLayout> 
     </template> 
    </ListView>

來源

2017-03-08 user2094257

你想讓表頭始終可見嗎？我會在列表視圖之外放置一個網格，以便在列表滾動時可以看到標題。這也減少了列表視圖項目模板內的佈局。這是一件好事。 –

@Brad Martin不，我正試圖讓頭部在各自的內容上方形成完美對齊的列列。例如第二個標題被渲染到它的實際內容的左邊，它應該在第二個模板中的內容之上，看起來像一個列... – user2094257

那麼你可能需要爲你的gridlayout'rows'和'columns設置相同的設置'您上面的代碼片段具有不同的'列'值 - 因此它們不會很好地對齊，具體取決於內容。 –