fix(module:cascader): fix nz-cascader don't refresh when nzOptions bi…

…nding data changed (#219) (#221) close #219
NG-ZORRO · Sep 5, 2017 · 74b2506 · 74b2506
1 parent 6e1b144
commit 74b2506
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 6 deletions.
diff --git 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
@@ -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)">
-    </nz-cascader>`,
-  styles  : []
+    </nz-cascader>
+    <a href="javascript:;" (click)="_changeNzOptions()" class="change-options">
+      Change Options
+    </a>
+    `,
+  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;
+    }
   }
 }