diff --git a/src/components/cascader/nz-cascader.component.ts b/src/components/cascader/nz-cascader.component.ts index 3c80f817a0..4ab1f907f3 100644 --- a/src/components/cascader/nz-cascader.component.ts +++ b/src/components/cascader/nz-cascader.component.ts @@ -442,8 +442,10 @@ export class NzCascaderComponent implements OnInit, OnDestroy, OnChanges, AfterV /** clear the input box and selected options */ _clearSelection(event: Event): void { - event.preventDefault(); - event.stopPropagation(); + if (event) { + event.preventDefault(); + event.stopPropagation(); + } this._displayLabel = ''; this._displayLabelIsTemplate = false; @@ -1041,6 +1043,16 @@ export class NzCascaderComponent implements OnInit, OnDestroy, OnChanges, AfterV this._removeHostClass(`${this._prefixCls}-picker-disabled`); } } + + const nzOptions = changes['nzOptions']; + if (nzOptions && !nzOptions.isFirstChange()) { + this._nzColumns.splice(0); + const newOptions: CascaderOption[] = nzOptions.currentValue; + if (newOptions && newOptions.length) { + this._nzColumns.push(newOptions); + this._clearSelection(null); + } + } } ngAfterViewInit(): void { diff --git a/src/showcase/nz-demo-cascader/nz-demo-cascader-basic.component.ts b/src/showcase/nz-demo-cascader/nz-demo-cascader-basic.component.ts index 84cbe7deb7..910a57866d 100644 --- a/src/showcase/nz-demo-cascader/nz-demo-cascader-basic.component.ts +++ b/src/showcase/nz-demo-cascader/nz-demo-cascader-basic.component.ts @@ -1,6 +1,6 @@ import {Component, OnInit} from '@angular/core'; -const options = [{ +const init_options = [{ value: 'zhejiang', label: 'Zhejiang', children: [{ @@ -26,6 +26,32 @@ const options = [{ }], }]; +const other_options = [{ + value: 'fujian', + label: 'Fujian', + children: [{ + value: 'xiamen', + label: 'Xiamen', + children: [{ + value: 'Kulangsu', + label: 'Kulangsu', + isLeaf: true + }], + }], +}, { + value: 'guangxi', + label: 'Guangxi', + children: [{ + value: 'guilin', + label: 'Guilin', + children: [{ + value: 'Lijiang', + label: 'Li Jiang River', + isLeaf: true + }], + }], +}]; + @Component({ selector: 'nz-demo-cascader-basic', @@ -36,12 +62,24 @@ const options = [{ [(ngModel)]="_value" (ngModelChange)="_console($event)" (nzChange)="_console($event)"> - `, - styles : [] + + + Change Options + + `, + styles : [ + ` + .change-options { + display: inline-block; + font-size: 12px; + margin-top: 8px; + } + ` + ] }) export class NzDemoCascaderBasicComponent implements OnInit { /** init data */ - _options = options; + _options = null; _value: any[] = null; @@ -53,6 +91,18 @@ export class NzDemoCascaderBasicComponent implements OnInit { } ngOnInit() { + // let's set nzOptions in a asynchronous way + setTimeout(() => { + this._options = init_options; + }, 100); + } + + _changeNzOptions(): void { + if (this._options === init_options) { + this._options = other_options; + } else { + this._options = init_options; + } } }