Angular动态表头

需求是这样的，有一些业务需要展示业务列表，而不同的业务其表头不完全相同，出于复用的原因，考虑写一个通用的表，用来展示业务列表。

使用组件：NG-Zorro

1.配置文件

配置文件采用Json格式，放在assets下面

{
	"header": [{
                "label": "标识码",
                "field": "bsm"
            },
            {
                "label": "年度",
                "field": "nd"
            },
            {
                "label": "单位名称",
                "field": "ywdw"
            },
            {
                "label": "检查人员",
                "field": "jcry"
            },
            {
                "label": "检查时间",
                "field": "jcsj"
            },
            {
                "label": "检查结果",
                "field": "jcjg"
            }
        ]
}

2.获取表头配置信息

通过http的Get请求获取配置信息，可实现异步加载

getHeader(): any {
    return this.http.get(`./assets/table-header-list.json`);
}

3.解析表头信息

 tableInit() {
    this.chxmService.getJcchxmglHeader().subscribe( res => {
      this._tableHeaders = res.header;
      // 获取数据
      this.refreshData();
    });
}

4.列表构建

<div style="margin-bottom: 16px;">
        <button nz-button [disabled]="_disabledButton" [nzType]="'primary'" [nzLoading]="_operating" (click)="_operateData()">Operating</button>
        <span style="margin-left: 8px;" *ngIf="_checkedNumber">Selected {
   
   {_checkedNumber}} items</span>
    </div>
    <nz-table #nzTable [nzAjaxData]="_dataSet" [nzLoading]="_tableLoad" [nzPageSize]="10" [(nzPageIndex)]="_pageIndex" [nzTotal]="_total" (nzPageIndexChange)="refreshData()" (nzPageSizeChange)="refreshData()">
        <thead nz-thead>
        <tr>
            <th nz-th nzCheckbox>
            <label nz-checkbox [(ngModel)]="_allChecked" [nzIndeterminate]="_indeterminate" (ngModelChange)="_checkAll($event)">
            </label>
            </th>
            <th *ngFor="let i of _tableHeaders">{
   
   { i.label }}</th>
        </tr>
        </thead>
        <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let i of nzTable.data">
            <td nz-td nzCheckbox>
            <label nz-checkbox [(ngModel)]="i.checked" (ngModelChange)="_refreshStatus($event)">
            </label>
            </td>
            <td nz-td *ngFor="let t of _tableHeaders">{
   
   {i[t.field]}}</td>           
        </tr>
        </tbody>
    </nz-table>

配置文件中有两个字段，label即表头显示名称，field是表内容的真实字段名，使用 i[t.field]的方式获取属性的值，从而达到绑定数据的功能