diff --git a/components/cascader/nz-cascader-li.component.ts b/components/cascader/nz-cascader-li.component.ts index dcfb216119..e99383277a 100644 --- 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 index 14bdba8d41..22681e778f 100644 --- 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; @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 index 1530fd606f..3e4a4e708e 100644 --- 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 index f7b2ada87b..65a6719b0b 100644 --- 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';