Question

我正在忙于一个Angular2 / Nativescript项目，我正在尝试复制HTML表格......我的方法是向Listview添加两个模板，一个用于标题，另一个用于内容，从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

您可能需要为您的网格布局行和列设置相同的设置，上面的代码段具有不同的列值 - 因此根据内容不能很好地对齐

Angular2 / Nativescript：使用Nativescript的ListView复制HTML表的问题

1 个答案: