Angular2 - 如何创建一个简单的表

时间:2017-04-04 07:58:39

标签: angular

我需要知道在这种情况下使用的正确做法:

我有一个返回表格数据集的WebApi,我必须使用引导表来显示它...

如何实施?我应该使用哪个bootstrap组件?

该表非常简单,它只显示少量数据和一个按钮以进入行详细信息...

感谢支持

2 个答案:

答案 0 :(得分:9)

这是一个简单表格的示例,它会将您重定向到行点击的详细信息:

<table class="table table-hover">
    <thead>
        <tr>
            <td>Id</td>
            <td>Title</td>
            <td>Amount</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let transfer of transfers" [routerLink]="['/transfer']" [queryParams]="{ id: transfer.id }">
            <td>{{transfer.id}}</td>
            <td>{{transfer.title}}</td>
            <td>{{transfer.amount}}</td>
        </tr>
    </tbody>
</table> 

我认为您正在使用transfers数组并根据id进行重定向。

答案 1 :(得分:3)

您可以使用Bootstrap angular 2数据表。检查这个URL

如果您想测试另一个解决方案,请使用teradata共价数据表。请检查此link

通过使用,您可以获得具有更多附加功能的响应式设计,例如:搜索工具,分页