ionic：在Ionic项目中使用ngx-datatable创建表格展示数据

想要在ionic中使用ngx-datatable插件展示表格，首先需要安装插件：npm install @swimlane/ngx-datatable

然后将这个插件的依赖导入到要使用这个插件所在的页面的module中：

import {NgxDatatableModule} from '@swimlane/ngx-datatable'

接下来，在页面上取到后台传给我们的表格的数据，比如我这里的数据结构如下图所示：

现在想要取出billingRecordsDetailVoList表格中的数据：

<ngx-datatable [rows]="item.billingRecordsDetailVoList" [columns]="columns" 
   [scrollbarH]="true">
</ngx-datatable>

 其中[scrollbarH]="true"是在表格左右滑动的时候显示滑动条，另外在组件中要规定每一列对应每一行的哪一个字段：

columns = [
    // 将第一列（在我的表格中指向“项目名称”这一列）固定
    { prop: 'projectName', name: '项目名称', frozenLeft: true },  
    { prop: 'unit', name: '单位' },
    { prop: 'price', name: '单价' },
    { prop: 'number', name: '数量' },
    { prop: 'amount', name: '金额' },
    { prop: 'isDiscount', name: '参与打折' },
  ];

这样在页面中就可以显示这个表格了：