fix(module:cascader): fix children state not changed in async demo (N…

…G-ZORRO#2985) * fix(module:cascader): fix children state not changed in async demo * build: fix ci * Update components/cascader/nz-cascader-li.component.ts Co-Authored-By: wendzhue <wendzhue@gmail.com> close NG-ZORRO#2984
Ricbet · Apr 9, 2020 · 0b23225 · 0b23225
1 parent 4c19cff
commit 0b23225
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 8 deletions.
diff --git a/components/cascader/nz-cascader-li.component.ts b/components/cascader/nz-cascader-li.component.ts
@@ -1,5 +1,6 @@
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   Input, Renderer2,
@@ -27,7 +28,7 @@ export class NzCascaderOptionComponent {
   @Input() highlightText: string;
   @Input() nzLabelProperty = 'label';
 
-  constructor(private sanitizer: DomSanitizer, elementRef: ElementRef, renderer: Renderer2) {
+  constructor(private sanitizer: DomSanitizer, private cdr: ChangeDetectorRef, elementRef: ElementRef, renderer: Renderer2) {
     renderer.addClass(elementRef.nativeElement, 'ant-cascader-menu-item');
   }
 
@@ -42,4 +43,8 @@ export class NzCascaderOptionComponent {
     }
     return str.replace(new RegExp(this.highlightText, 'g'), safeHtml);
   }
+
+  markForCheck(): void {
+    this.cdr.markForCheck();
+  }
 }
diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
@@ -13,9 +13,11 @@ import {
   OnDestroy,
   Optional,
   Output,
+  QueryList,
   Renderer2,
   TemplateRef,
   ViewChild,
+  ViewChildren,
   ViewEncapsulation
 } from '@angular/core';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -26,6 +28,7 @@ import { DEFAULT_CASCADER_POSITIONS } from '../core/overlay/overlay-position';
 import { NgClassType } from '../core/types/ng-class';
 import { arraysEqual, toArray } from '../core/util/array';
 import { InputBoolean } from '../core/util/convert';
+import { NzCascaderOptionComponent } from './nz-cascader-li.component';
 
 import {
   CascaderOption,
@@ -76,6 +79,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
   @ViewChild('input') input: ElementRef;
   @ViewChild('menu') menu: ElementRef;
   @ViewChild(CdkConnectedOverlay) overlay: CdkConnectedOverlay;
+  @ViewChildren(NzCascaderOptionComponent) cascaderItems: QueryList<NzCascaderOptionComponent>;
 
   @Input() @InputBoolean() nzShowInput = true;
   @Input() @InputBoolean() nzShowArrow = true;
@@ -318,16 +322,17 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
       this.isLoading = columnIndex < 0;
       option.loading = true;
       this.nzLoadData(option, columnIndex).then(() => {
-        option.loading = this.isLoading = false;
         if (option.children) {
           option.children.forEach(child => child.parent = columnIndex < 0 ? undefined : option);
           this.setColumnData(option.children, columnIndex + 1);
-          this.cdr.detectChanges();
-          this.reposition();
         }
         if (success) {
           success();
         }
+        option.loading = this.isLoading = false; // Need to check children.
+        this.checkChildren();
+        // Reposition in the next tick, because we use markForCheck above.
+        Promise.resolve().then(() => this.reposition());
       }, () => {
         option.loading = this.isLoading = false;
         option.isLeaf = true;
@@ -675,12 +680,12 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
     };
 
     const filter: (inputValue: string, p: CascaderOption[]) => boolean =
-            this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).filter
-              ? (this.nzShowSearch as NzShowSearchOptions).filter
-              : defaultFilter;
+      this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).filter
+        ? (this.nzShowSearch as NzShowSearchOptions).filter
+        : defaultFilter;
 
     const sorter: (a: CascaderOption[], b: CascaderOption[], inputValue: string) => number =
-            this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).sorter;
+      this.nzShowSearch instanceof Object && (this.nzShowSearch as NzShowSearchOptions).sorter;
 
     const loopParent = (node: CascaderOption, forceDisabled = false) => {
       const disabled = forceDisabled || node.disabled;
@@ -864,4 +869,8 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
       });
     }
   }
+
+  private checkChildren(): void {
+    this.cascaderItems.forEach(item => item.markForCheck());
+  }
 }
diff --git a/components/icon/nz-icon-test.module.ts b/components/icon/nz-icon-test.module.ts
@@ -14,6 +14,7 @@ const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesign
 /**
  * Include this module in every testing spec, except `nz-icon.spec.ts`.
  */
+// @dynamic
 @NgModule({
   exports: [
     NzIconModule

diff --git a/components/icon/public-api.ts b/components/icon/public-api.ts
@@ -1,3 +1,4 @@
 export * from './nz-icon.module';
+export * from './nz-icon-test.module';
 export * from './nz-icon.directive';
 export * from './nz-icon.service';