ng-zorro在前端分页的同时，表格添加、删除、编辑行

与element相比，ng-zorro的表格组件的前端分页是封装好的，可直接使用，nz-table中的 [nzFrontPagination]属性用于判断是否前端分页，默认值为true；

添加行

add() {
        const arr = this.validateForm.get('line') as FormArray;
        arr.push(this.createForm()); // 推送form新表单
        this.listOfAllData = this.validateForm.controls['line']['controls'];
        this.listOfAllData = [...this.listOfAllData];
    }

删除行

delete(i, index) {
   const arr = this.validateForm.get('line') as FormArray;
   arr.removeAt(index); // 根据索引移除对应的表单
   this.listOfAllData = this.validateForm.controls['line']['controls'];
   this.listOfAllData = [...this.listOfAllData];
   // console.log(this.listOfAllData);
   // this.listOfAllData = this.listOfAllData.filter(d => d.value.bar_code !== i.bar_code);
    }

注意点

nzData 中的数据进行增删

按照 Angular 的设计，当需要对 nzData 中的数据进行增删时需要使用以下操作，使用 push 或者 splice 修改 nzData 的数据不会生效

// 增加数据
this.dataSet = [ ...this.dataSet, {
  key    : `${this.i}`,
  name   : `Edward King ${this.i}`,
  age    : '32',
  address: `London, Park Lane no. ${this.i}`
}];
// 删除数据
this.dataSet = this.dataSet.filter(d => d.key !== i);

formGroupName

<tr *ngFor="let data of nzTable.data;index as i;"
            [formGroupName]="10 * (pageIndex -1) + i">

其中的formGroupName的值不可为i，当为i时，在非首页添加删除数据时，均会渲染首页的数据，从而导致页面的数据显示不准。

element在前端分页的同时，表格添加、删除、编辑行

element在前端分页的同时，表格添加、删除、编辑行