Angular 4 动态table

       最近的项目中前端开发遇到多列的table问题，大概有40多列，而且这样的table还比较多，最主要的这个列还不是固定的，所以如果按照以往的硬编码的方式很不灵活，还容易出错；考虑结合阿里的antd组件库使用循环输出的方式解决这个问题；

1.返回数据结构

      后端返回的时候，不能只返回list的内容了，还有返回header的内容，包括header的中文显示名称，header的列属性名称；这样table的表头可以通过header列表循环显示出来；定义数据结构如图所示

public class ColumnHeader {

    private String showName;    //显示中文名

    private String property;    //dto属性
}

     然后数据部分还是List<T>的数组的方式返回；在循环每一行的时候，再循环header，拿到当前item的property显示即可；

2.前端代码

<table>
    <thead>
    <tr>
     <th *ngFor="let column of columnHeaders">
            {{column.showName}}
        </th>
    </tr>
    </thead>
    <tbody>
       <tr  *ngFor="let item of data">
       <td *ngFor="let column of columnHeaders" title="{{item[property]}}">
            <div class="content">{{item[property]}}</div>
        </td>
       </tr>
    </tbody>
</table>

这样就渲染除了table，这个table的列是根据后端返回的columnHeader数组返回的，列的中文显示内容也是根据后端返回的；这种方式的table是完全动态的；减少了之前硬编码的方式多列容易漏，也容易错的问题；结合阿里的antd组件的table可以做出很不错的table出来；

效果如图所示

可以抽象一下，做成个动态的table，只需要提供数据和header信息，就可以渲染出来很漂亮的table；还是很实用的；