動態生成表格（ng-zorro）

本文轉載自查看原文 2020-12-23 15:13 413 Angular學習筆記

一、環境 ng-cli，ant.design

二、表格

1）html：

 1                 <div class="table-wrap">
 2                 <nz-table
 3                     #indexTable
 4                     [nzData]="indexParam['dataList']"
 5                     [nzBordered]=true
 6                     [nzLoading]="isLoading"
 7                     [nzTotal]="totalNum"
 8                     [nzFrontPagination]=false
 9                     [nzPageIndex]="queryParam['pageNum']"
10                     [nzPageSize]="queryParam['pageSize']"
11                     [nzShowSizeChanger]=true
12                     [nzPageSizeOptions]="[5, 10, 15, 20]"
13                     [nzHideOnSinglePage]=true
14                     [nzShowQuickJumper]=true
15                     [nzShowTotal]="totalTemplate"
16                     (nzPageIndexChange)="handlePageIndexChange($event)"
17                     (nzPageSizeChange)="handlePageSizeChange($event)"
18                 >
19               <thead>
20                 <tr>
21                   <th *ngFor="let head of indexParam['headerList']">{{head}}</th>
22                 </tr>
23               </thead>
24               <tbody>
25                 <tr *ngFor="let data of indexTable.data">
26                     <td *ngFor="let field of indexParam['fieldList']">{{ data[field] }}</td>
27                 </tr>
28               </tbody>
29             </nz-table>
30             <ng-template #totalTemplate>
31               共 {{ totalNum }} 條記錄 第 {{ queryParam['pageNum'] }} / {{ pageTotal }} 頁
32             </ng-template>
33             </div>

2）ts:

// 指標表格參數

indexParam = {

headerList: ['時間','行業平台','B端總用戶數','收費用戶數','免費用戶數','活躍用戶數','活躍率'],

fieldList: ['time','platform','bend','charge','free','activeNum','activeRate'],

dataList: [

{'time':'2020-12-23','platform':'智慧校園平台','bend':6232,'charge':40,'free':2121,'activeNum':1221,'activeRate':'23%'},

]

};

// 渲染指標表格
  renderIndexTable(data) {
    // this.indexParam['headerList'] = data['headerList'];
    // this.indexParam['fieldList'] = data['fileList'];
    // this.indexParam['dataList'] = data['dataList'];
    // this.totalNum = data['total'];
    // this.pageTotal = Math.ceil(this.totalNum / this.queryParam['pageSize']);
  }

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 NG-ZORRO tooltip動態隱藏 NG-ZORRO 使用相關 ng-zorro 圖標加載 TimePicker - NG-ZORRO設置 ng-zorro 子菜單 angular + ng-zorro 表格后台分頁及排序功能實現，angular + ng-zorro 表格排序不起作用解決辦法 NG-ZORRO 文件上傳踩坑 ng-zorro等組件默認樣式的修改 ng-zorro等組件默認樣式的修改 Angular2：使用NG-ZORRO的tabs結合路由復用策略實現動態tab

動態生成表格 （ng-zorro）

免責聲明！

動態生成表格（ng-zorro）