【Angular2】页面表格制作

【前言】

　　小编最近在做关于表格的页面，通过和项目同组成员的交流，知道了如何实现表格数据从后端传入。现在和大家分享一下学习成果。

一、实现思路：

　　1、在.ts文件和.service.ts文件中添加对service和model的引用。

　　2、在.ts文件中声明service和model文件的构成的数组，函数调用后端数据。

　　3、在.service.ts文件中建立对json文件的URL链接，声明函数。

二、代码实现：

1、.html文件：

 

<div class="row">
    <div class="col-sm-12">
        <div class="user-item-container">
            <table class="table table-bordered">
                <caption class="captiontext" style="text-align:center"><span>{
  {name}}</span>同学，恭喜你成为<span>{
  {campusName}}</span>的一名学子！</caption>
                <thead>
                    <tr>
                        <th>学生姓名</th>
                        <th>专业</th>
                        <th>班级</th>
                        <th>学号</th>
                        <th>宿舍</th>
                        <th>缴费总金额</th>
                    </tr>
                </thead>
                <tbody>
                    <tr *ngFor="let student of students">