fix(module:cascader): fix searching error when nzOptions is an empty …

…array * update empty demos close #2784
NG-ZORRO · Jan 28, 2019 · 7f54967 · 7f54967
1 parent f6dfbd9
commit 7f54967
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 42 deletions.
diff --git a/components/cascader/nz-cascader.component.html b/components/cascader/nz-cascader.component.html
@@ -57,13 +57,16 @@
   <div
     #menu
     class="ant-cascader-menus"
+    *ngIf="nzOptions && nzOptions.length || isSearching"
     [class.ant-cascader-menus-hidden]="!menuVisible"
     [ngClass]="menuCls"
     [ngStyle]="nzMenuStyle"
     [@slideMotion]="dropDownPosition"
     (mouseleave)="onTriggerMouseLeave($event)">
-    <ul *ngFor="let options of columns; let i = index;" class="ant-cascader-menu" [ngClass]="menuColumnCls"
-        [style.height]="isSearching && !columns[0].length ? 'auto': ''" [style.width]="dropdownWidthStyle">
+    <ul *ngFor="let options of columns; let i = index;" class="ant-cascader-menu"
+        [ngClass]="menuColumnCls"
+        [style.height]="isSearching && !columns[0].length ? 'auto': ''"
+        [style.width]="dropdownWidthStyle">
       <li
         nz-cascader-option
         *ngFor="let option of options"
@@ -75,7 +78,8 @@
         (mouseleave)="onOptionMouseLeave(option, i, $event)"
         (click)="onOptionClick(option, i, $event)">
       </li>
-      <li *ngIf="isSearching && !columns[0].length" class="ant-cascader-menu-item ant-cascader-menu-item-expanded ant-cascader-menu-item-disabled">
+      <li *ngIf="isSearching"
+          class="ant-cascader-menu-item ant-cascader-menu-item-expanded ant-cascader-menu-item-disabled">
         <nz-embed-empty [nzComponentName]="'cascader'" [specificContent]="nzNotFoundContent"></nz-embed-empty>
       </li>
     </ul>

diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
@@ -23,7 +23,14 @@ import { EXPANDED_DROPDOWN_POSITIONS } from '../core/overlay/overlay-position-ma
 import { arrayEquals, toArray } from '../core/util/array';
 import { InputBoolean } from '../core/util/convert';
 
-import { CascaderOption, CascaderSearchOption, NzCascaderExpandTrigger, NzCascaderSize, NzCascaderTriggerType, NzShowSearchOptions } from './types';
+import {
+  CascaderOption,
+  CascaderSearchOption,
+  NzCascaderExpandTrigger,
+  NzCascaderSize,
+  NzCascaderTriggerType,
+  NzShowSearchOptions
+} from './types';
 
 const defaultDisplayRender = label => label.join(' / ');
 
@@ -93,7 +100,10 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
   @Input() nzLoadData: (node: CascaderOption, index?: number) => PromiseLike<any>;
 
   @Input()
-  get nzOptions(): CascaderOption[] { return this.columns[ 0 ]; }
+  get nzOptions(): CascaderOption[] {
+    return this.columns[ 0 ];
+  }
+
   set nzOptions(options: CascaderOption[] | null) {
     this.columnsSnapshot = this.columns = options && options.length ? [ options ] : [];
     if (!this.isSearching) {
@@ -139,7 +149,11 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
     this._inputValue = inputValue;
     this.toggleSearchMode();
   }
-  get inputValue(): string { return this._inputValue; }
+
+  get inputValue(): string {
+    return this._inputValue;
+  }
+
   private _inputValue = '';
 
   get menuCls(): ClassMap {
@@ -667,9 +681,15 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
       const disabled = forceDisabled || node.disabled;
       path.push(node);
       node.children.forEach((sNode) => {
-        if (!sNode.parent) { sNode.parent = node; } // Build parent reference when doing searching
-        if (!sNode.isLeaf) { loopParent(sNode, disabled); }
-        if (sNode.isLeaf || !sNode.children || !sNode.children.length) { loopChild(sNode, disabled); }
+        if (!sNode.parent) {
+          sNode.parent = node;
+        } // Build parent reference when doing searching
+        if (!sNode.isLeaf) {
+          loopParent(sNode, disabled);
+        }
+        if (sNode.isLeaf || !sNode.children || !sNode.children.length) {
+          loopChild(sNode, disabled);
+        }
       });
       path.pop();
     };
@@ -690,6 +710,11 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
       path.pop();
     };
 
+    if (!this.columnsSnapshot.length) {
+      this.columns = [ [] ];
+      return;
+    }
+
     this.columnsSnapshot[ 0 ].forEach(node => (node.isLeaf || !node.children || !node.children.length)
       ? loopChild(node)
       : loopParent(node));

diff --git a/components/empty/demo/config.ts b/components/empty/demo/config.ts
@@ -20,7 +20,7 @@ import { NzEmptyService } from 'ng-zorro-antd';
     <nz-tree-select style="width: 200px;"></nz-tree-select>
 
     <h3>Cascader</h3>
-    <nz-cascader style="width: 200px;" [nzShowSearch]="true" [nzOptions]="options"></nz-cascader>
+    <nz-cascader style="width: 200px;" [nzShowSearch]="true" [nzOptions]="[]"></nz-cascader>
 
     <h3>Transfer</h3>
     <nz-transfer></nz-transfer>
@@ -55,37 +55,6 @@ export class NzDemoEmptyConfigComponent {
   @ViewChild('customTpl') customTpl: TemplateRef<any>; // tslint:disable-line:no-any
 
   customize = false;
-  options = [
-    {
-      value   : 'zhejiang',
-      label   : 'Zhejiang',
-      children: [ {
-        value   : 'hangzhou',
-        label   : 'Hangzhou',
-        children: [ {
-          value : 'xihu',
-          label : 'West Lake',
-          isLeaf: true
-        } ]
-      }, {
-        value : 'ningbo',
-        label : 'Ningbo',
-        isLeaf: true
-      } ]
-    }, {
-      value   : 'jiangsu',
-      label   : 'Jiangsu',
-      children: [ {
-        value   : 'nanjing',
-        label   : 'Nanjing',
-        children: [ {
-          value : 'zhonghuamen',
-          label : 'Zhong Hua Men',
-          isLeaf: true
-        } ]
-      } ]
-    }
-  ];
 
   constructor(private nzEmptyService: NzEmptyService) {
   }

diff --git a/components/empty/demo/customize.ts b/components/empty/demo/customize.ts
@@ -4,7 +4,7 @@ import { Component } from '@angular/core';
   selector: 'nz-demo-empty-customize',
   template: `
     <nz-empty
-      [nzNotFoundImage]="'https://camo.githubusercontent.com/f23136cf1985a02fa5cc9a09b766b65f8677826c/68747470733a2f2f696d672e616c6963646e2e636f6d2f7466732f54423146564d446f737249384b4a6a79304668585862666e7058612d3230302d3230302e737667'"
+      [nzNotFoundImage]="'https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original'"
       [nzNotFoundContent]="contentTpl"
       [nzNotFoundFooter]="footerTpl">
       <ng-template #contentTpl>