From c85743d520b04a3c3abe0f67a9805d1c5eefb523 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=96=87=E8=94=BA?= <AngusFu@users.noreply.github.com>
Date: Wed, 19 Jun 2019 19:56:18 +0800
Subject: [PATCH] fix(module:table): fix sortChange with dynamic columns
 (#3603) (#3605)

close #3603
---
 components/table/nz-thead.component.ts |  4 ++--
 components/table/nz-thead.spec.ts      | 23 +++++++++++++++++++++++
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/components/table/nz-thead.component.ts b/components/table/nz-thead.component.ts
index 198d8001e77..9e549eccaf9 100644
--- 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
index 202bc874966..f8e53c38566 100644
--- 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,6 +85,7 @@ 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>
   `
@@ -71,4 +93,5 @@ describe('nz-thead', () => {
 export class NzTheadTestNzTableComponent {
   singleSort = false;
   sortChange = jasmine.createSpy('sort change');
+  columns = ['third', 'fourth'];
 }