fix(module:descriptions): fix changes to inputs of children not working

close #3795
NG-ZORRO · Jul 16, 2019 · 77b5d19 · 77b5d19
1 parent 4f1e09c
commit 77b5d19
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 14 deletions.
diff --git a/components/descriptions/nz-descriptions-item.component.ts b/components/descriptions/nz-descriptions-item.component.ts
@@ -6,9 +6,19 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { ChangeDetectionStrategy, Component, Input, TemplateRef, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  Component,
+  Input,
+  OnChanges,
+  OnDestroy,
+  TemplateRef,
+  ViewChild,
+  ViewEncapsulation
+} from '@angular/core';
 
 import { InputNumber } from 'ng-zorro-antd/core';
+import { Subject } from 'rxjs';
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -18,9 +28,19 @@ import { InputNumber } from 'ng-zorro-antd/core';
   exportAs: 'nzDescriptionsItem',
   preserveWhitespaces: false
 })
-export class NzDescriptionsItemComponent {
+export class NzDescriptionsItemComponent implements OnChanges, OnDestroy {
   @ViewChild(TemplateRef, { static: true }) content: TemplateRef<void>;
 
   @Input() @InputNumber() nzSpan = 1;
   @Input() nzTitle: string = '';
+
+  readonly inputChange$ = new Subject<void>();
+
+  ngOnChanges(): void {
+    this.inputChange$.next();
+  }
+
+  ngOnDestroy(): void {
+    this.inputChange$.complete();
+  }
 }
diff --git a/components/descriptions/nz-descriptions.component.ts b/components/descriptions/nz-descriptions.component.ts
@@ -23,7 +23,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import { merge, Subject } from 'rxjs';
-import { finalize, startWith, takeUntil } from 'rxjs/operators';
+import { auditTime, finalize, startWith, switchMap, takeUntil } from 'rxjs/operators';
 
 import { responsiveMap, warn, Breakpoint, InputBoolean, NzDomEventService } from 'ng-zorro-antd/core';
 import { NzDescriptionsItemRenderProps, NzDescriptionsSize } from './nz-descriptions-definitions';
@@ -88,29 +88,36 @@ export class NzDescriptionsComponent implements OnChanges, OnDestroy, AfterConte
   }
 
   ngAfterContentInit(): void {
-    merge(
-      this.items.changes.pipe(
-        startWith(this.items),
-        takeUntil(this.destroy$)
-      ),
-      this.resize$
-    )
+    const contentChange$ = this.items.changes.pipe(
+      startWith(this.items),
+      takeUntil(this.destroy$)
+    );
+
+    merge(contentChange$, this.resize$)
       .pipe(takeUntil(this.destroy$))
       .subscribe(() => {
         this.prepareMatrix();
         this.cdr.markForCheck();
       });
 
+    contentChange$
+      .pipe(
+        switchMap(() => merge(...this.items.map(i => i.inputChange$)).pipe(auditTime(16))),
+        takeUntil(this.destroy$)
+      )
+      .subscribe(() => {
+        this.prepareMatrix();
+        this.cdr.markForCheck();
+      });
+
     if (this.platform.isBrowser) {
       this.nzDomEventService
         .registerResizeListener()
         .pipe(
           takeUntil(this.destroy$),
           finalize(() => this.nzDomEventService.unregisterResizeListener())
         )
-        .subscribe(() => {
-          this.resize$.next();
-        });
+        .subscribe(() => this.resize$.next());
     }
   }
 

diff --git a/components/descriptions/nz-descriptions.spec.ts b/components/descriptions/nz-descriptions.spec.ts
@@ -9,7 +9,7 @@ declare const viewport: any;
 @Component({
   template: `
     <nz-descriptions [nzTitle]="title" [nzBordered]="bordered" [nzColumn]="column">
-      <nz-descriptions-item *ngFor="let col of colspanArray; let i = index" [nzTitle]="'Title' + i" [nzSpan]="col">
+      <nz-descriptions-item *ngFor="let col of colspanArray; let i = index" [nzTitle]="itemTitle + i" [nzSpan]="col">
       </nz-descriptions-item>
     </nz-descriptions>
   `
@@ -19,6 +19,7 @@ export class NzTestDescriptionsComponent {
   colspanArray: number[] = [1, 1, 1];
   column: number | { [key: string]: number } = 3;
   title = 'Title';
+  itemTitle = 'Item Title ';
 }
 
 describe('nz descriptions', () => {
@@ -115,5 +116,18 @@ describe('nz descriptions', () => {
 
       viewport.reset();
     }));
+
+    // fix #3795
+    it('should change to use content work', fakeAsync(() => {
+      let firstTitle = componentElement.querySelector('.ant-descriptions-item-label') as HTMLSpanElement;
+      expect(firstTitle.innerText).toBe('Item Title 0');
+
+      testComponent.itemTitle = 'Item ';
+      fixture.detectChanges();
+      tick(16);
+      fixture.detectChanges();
+      firstTitle = componentElement.querySelector('.ant-descriptions-item-label') as HTMLSpanElement;
+      expect(firstTitle.innerText).toBe('Item 0');
+    }));
   });
 });