fix(module:table): fix table crash with double binding (NG-ZORRO#3007)

close NG-ZORRO#3004
hsuanxyz · Mar 1, 2019 · 174e7c1 · 174e7c1
1 parent 57f85df
commit 174e7c1
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 9 deletions.
diff --git a/components/table/nz-table.component.ts b/components/table/nz-table.component.ts
@@ -122,7 +122,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
         this.nzPageIndex = index;
         this.nzPageIndexChange.emit(this.nzPageIndex);
       }
-      this.updateFrontPaginationDataIfNeeded();
+      this.updateFrontPaginationDataIfNeeded(this.nzPageSize !== size);
     }
   }
 
@@ -177,15 +177,17 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
     }
   }
 
-  updateFrontPaginationDataIfNeeded(): void {
+  updateFrontPaginationDataIfNeeded(isPageSizeOrDataChange: boolean = false): void {
     let data = [];
     if (this.nzFrontPagination) {
       this.nzTotal = this.nzData.length;
-      const maxPageIndex = Math.ceil(this.nzData.length / this.nzPageSize);
-      const pageIndex = !this.nzPageIndex ? 1 : (this.nzPageIndex > maxPageIndex ? maxPageIndex : this.nzPageIndex);
-      if (pageIndex !== this.nzPageIndex) {
-        this.nzPageIndex = pageIndex;
-        Promise.resolve().then(() => this.nzPageIndexChange.emit(pageIndex));
+      if (isPageSizeOrDataChange) {
+        const maxPageIndex = Math.ceil(this.nzData.length / this.nzPageSize) || 1;
+        const pageIndex = this.nzPageIndex > maxPageIndex ? maxPageIndex : this.nzPageIndex;
+        if (pageIndex !== this.nzPageIndex) {
+          this.nzPageIndex = pageIndex;
+          Promise.resolve().then(() => this.nzPageIndexChange.emit(pageIndex));
+        }
       }
       data = this.nzData.slice((this.nzPageIndex - 1) * this.nzPageSize, this.nzPageIndex * this.nzPageSize);
     } else {
@@ -216,7 +218,7 @@ export class NzTableComponent implements OnInit, AfterViewInit, OnDestroy, OnCha
       this.setScrollPositionClassName();
     }
     if (changes.nzPageIndex || changes.nzPageSize || changes.nzFrontPagination || changes.nzData) {
-      this.updateFrontPaginationDataIfNeeded();
+      this.updateFrontPaginationDataIfNeeded(!!(changes.nzPageSize || changes.nzData));
     }
 
   }

diff --git a/components/table/nz-table.spec.ts b/components/table/nz-table.spec.ts
@@ -11,7 +11,7 @@ describe('nz-table', () => {
   beforeEach(async(() => {
     injector = TestBed.configureTestingModule({
       imports     : [ NzTableModule ],
-      declarations: [ NzTestTableBasicComponent, NzTestTableScrollComponent ]
+      declarations: [ NzTestTableBasicComponent, NzTestTableScrollComponent, NzTableSpecCrashComponent ]
     });
     TestBed.compileComponents();
   }));
@@ -294,6 +294,19 @@ describe('nz-table', () => {
       expect(tableBody.scrollWidth).toBe(tableBody.clientWidth);
     });
   });
+  describe('double binding nz-table', () => {
+    let fixture;
+    let testComponent;
+    beforeEach(() => {
+      fixture = TestBed.createComponent(NzTableSpecCrashComponent);
+      fixture.detectChanges();
+      testComponent = fixture.debugElement.componentInstance;
+    });
+    it('should not crash when double binding pageSize and pageIndex', () => {
+      fixture.detectChanges();
+      expect(testComponent.pageIndexChange).toHaveBeenCalledTimes(0);
+    });
+  });
 });
 
 @Component({
@@ -441,3 +454,41 @@ export class NzTestTableScrollComponent implements OnInit {
     }
   }
 }
+
+/** https://github.com/NG-ZORRO/ng-zorro-antd/issues/3004 **/
+@Component({
+  template: `
+    <nz-table #nzTable [nzData]="data" [(nzPageIndex)]="pageIndex" [(nzPageSize)]="pageSize" (nzPageIndexChange)="pageIndexChange">
+      <thead>
+        <tr>
+          <th>ID</th>
+          <th>NAME</th>
+        </tr>
+      </thead>
+      <tbody>
+        <ng-container *ngFor="let item of nzTable.data">
+          <tr>
+            <td>{{item.id}}</td>
+            <td>{{item.name}}</td>
+          </tr>
+        </ng-container>
+      </tbody>
+    </nz-table>
+  `
+})
+export class NzTableSpecCrashComponent {
+  data = [];
+  pageIndex = 1;
+  pageSize = 10;
+  pageIndexChange = jasmine.createSpy('pageSize callback');
+
+  constructor() {
+    setTimeout(() => {
+      this.data = new Array(100).fill(1).map((_, i) => ({
+        id  : i + 1,
+        name: `name ${i + 1}`
+      }));
+    }, 1000);
+
+  }
+}