Angular2/Nativescript：使用 Nativescript 的 ListView 复制 HTML table 时出现问题

Question

我正忙于一个 Angular2/Nativescript 项目，我试图在其中复制一个 HTML table...我打算这样做的方法是将两个模板添加到Listview，一个用于 headers，另一个用于从 REST API 获取的内容，并且总是不同的。我对这种方法的唯一问题是 left-aligning headers 和内容，现在这些列并没有完全在他们的 headers 下开始而是有点向右所以它有点弄清楚哪个列属于哪个 header 令人困惑。是否可以在 Nativescript 中完全做到这一点？我也不知道如何添加边框来分隔 table/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 table 时出现问题

Angular2/Nativescript: Issues replicating a HTML table using Nativescript's ListView

nativescript

angular2-nativescript

angular