Angular dynamic header

The requirements are as follows. Some businesses need to display the business list, and different businesses have different table headers. For the sake of reuse, consider writing a general table to display the business list.

Components used: NG-Zorro

1. Configuration file

The configuration file is in Json format and placed under assets

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

2. Obtain header configuration information

Obtain configuration information through http Get request, which can realize asynchronous loading

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

3. Parse header information

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

4. List building

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

There are two fields in the configuration file, label is the display name of the table header, field is the real field name of the table content, use i[t.field] to get the value of the attribute, so as to achieve the function of binding data