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

【问题标题】：Angular2/Nativescript: Issues replicating a HTML table using Nativescript's ListViewAngular2/Nativescript：使用 Nativescript 的 ListView 复制 HTML 表的问题
【发布时间】：2017-03-13 19:14:51
【问题描述】：

我正忙于一个 Angular2/Nativescript 项目，我正在尝试复制一个 HTML 表...我要做的方式是向 Listview 添加两个模板，一个用于标题，另一个用于内容是从 REST API 中获取的，并且总是不同的。我对这种方法的唯一问题是左对齐标题和内容，现在列并没有完全在它们的标题下开始，而是有点向右，所以弄清楚哪个列属于哪个标题有点混乱。在 Nativescript 中可以做到这一点吗？我也不知道如何添加边框来分隔我的表格/列表视图的不同行和单元格......知道我该怎么做吗？

我的代码：

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

【问题讨论】：

您是否希望表格标题始终可见？我会在列表视图之外放置一个网格，以便在列表滚动时可以看到标题。这也减少了列表视图项模板内的布局。这是一件好事。
@Brad Martin 不，我正在尝试将标题放在其各自内容之上以形成完美对齐的列。例如第二个标题被渲染到它的实际内容的左侧，它应该在第二个模板中它的内容之上，看起来像一列......
那么您可能需要为您的网格布局设置相同的设置 rows 和 columns 您上面的 sn-p 具有不同的 column 值 - 因此它们不会很好地对齐，具体取决于内容。
@Brad Martin 非常感谢。请添加您的评论作为答案

标签： angular nativescript angular2-nativescript

【解决方案1】：

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

【讨论】：