Angular2/Nativescript：NativescriptのListViewを使用してHTMLテーブルを複製する際の問題

Question

私はHTMLテーブルを複製しようとしているAngular2/Nativescriptプロジェクトに忙しかった...私はそれについて2つのテンプレートをリストビューは、ヘッダー用とREST APIからフェッチされ、常に異なるコンテンツ用のものです。このアプローチの私の唯一の問題は、ヘッダーとコンテンツを左揃えにすることです。現在、列はヘッダーの下で正確に始まっていませんが、右に少し始まるので、どの列がどのヘッダーに属しているのか分かりにくいです。 Nativescriptでこれを行うことは可能ですか？私はまた、私のテーブル/ Listviewの異なる行とセルを区切るために罫線を追加する方法を見つけることができません...私はこれを行うことについて行くことができますどのようなアイデア？

私のコード：

<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> 

Answer 1

もしあなたのGridLayout行と列スニペットは、上記の別の列の値を持っているため、同じ設定を持っている可能性が必要 - そう、彼らはコンテンツに応じて、非常によく整列しています