fix(module:table): fix sortChange with dynamic columns (#3603)

sortChange() called multiple times after columns changed
NG-ZORRO · Jun 19, 2019 · bbc48fa · bbc48fa
1 parent 3dbe7c2
commit bbc48fa
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/components/table/nz-thead.component.ts b/components/table/nz-thead.component.ts
@@ -26,7 +26,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { merge, Subject } from 'rxjs';
-import { flatMap, startWith, takeUntil } from 'rxjs/operators';
+import { startWith, switchMap, takeUntil } from 'rxjs/operators';
 
 import { InputBoolean } from 'ng-zorro-antd/core';
 
@@ -62,7 +62,7 @@ export class NzTheadComponent implements AfterContentInit, OnDestroy, AfterViewI
     this.listOfNzThComponent.changes
       .pipe(
         startWith(true),
-        flatMap(() =>
+        switchMap(() =>
           merge<{ key: string; value: string }>(...this.listOfNzThComponent.map(th => th.nzSortChangeWithKey))
         ),
         takeUntil(this.destroy$)

diff --git a/components/table/nz-thead.spec.ts b/components/table/nz-thead.spec.ts
@@ -54,6 +54,27 @@ describe('nz-thead', () => {
       expect(upButtons[1].querySelector('.ant-table-column-sorter-down').classList).toContain('on');
       expect(testComponent.sortChange).toHaveBeenCalledTimes(2);
     });
+
+    // Test for #3603
+    it('should support dynamic headers', () => {
+      testComponent.singleSort = true;
+      fixture.detectChanges();
+      expect(testComponent.sortChange).toHaveBeenCalledTimes(0);
+      let upButtons = table.nativeElement.querySelectorAll('.ant-table-column-sorters');
+      upButtons[2].click();
+      fixture.detectChanges();
+      expect(testComponent.sortChange).toHaveBeenCalledTimes(1);
+      upButtons[3].click();
+      fixture.detectChanges();
+      expect(testComponent.sortChange).toHaveBeenCalledTimes(2);
+
+      testComponent.columns = testComponent.columns.slice(0, 1);
+      fixture.detectChanges();
+      upButtons = table.nativeElement.querySelectorAll('.ant-table-column-sorters');
+      expect(upButtons.length).toBe(3);
+      upButtons[2].click();
+      expect(testComponent.sortChange).toHaveBeenCalledTimes(3);
+    });
   });
 });
 
@@ -64,11 +85,13 @@ describe('nz-thead', () => {
       <thead [nzSingleSort]="singleSort" (nzSortChange)="sortChange($event)">
         <th nzShowSort nzSortKey="first"></th>
         <th nzShowSort nzSortKey="second"></th>
+        <th nzShowSort *ngFor="let col of columns" [nzSortKey]="col"></th>
       </thead>
     </nz-table>
   `
 })
 export class NzTheadTestNzTableComponent {
   singleSort = false;
   sortChange = jasmine.createSpy('sort change');
+  columns = ['third', 'fourth'];
 }