fix(module:cascader): fix empty nzOption error in search mode

close #2784 Updated Empty component demo
NG-ZORRO · Jan 15, 2019 · 9aa1374 · 9aa1374
1 parent 791b9b3
commit 9aa1374
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 50 deletions.
diff --git a/components/cascader/nz-cascader.component.html b/components/cascader/nz-cascader.component.html
@@ -57,27 +57,31 @@
   <div
     #menu
     class="ant-cascader-menus"
+    *ngIf="nzOptions.length || isSearching"
     [class.ant-cascader-menus-hidden]="!menuVisible"
     [ngClass]="menuCls"
     [ngStyle]="nzMenuStyle"
     [@dropDownAnimation]="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">
-      <li
-        nz-cascader-option
-        *ngFor="let option of options"
-        [nzLabelProperty]="nzLabelProperty"
-        [activated]="isOptionActivated(option, i)"
-        [highlightText]="isSearching ? inputValue : ''"
-        [option]="option"
-        (mouseenter)="onOptionMouseEnter(option, i, $event)"
-        (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">
-        <nz-embed-empty [nzComponentName]="'cascader'" [specificContent]="nzNotFoundContent"></nz-embed-empty>
-      </li>
-    </ul>
+    <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"
+      [nzLabelProperty]="nzLabelProperty"
+      [activated]="isOptionActivated(option, i)"
+      [highlightText]="isSearching ? inputValue : ''"
+      [option]="option"
+      (mouseenter)="onOptionMouseEnter(option, i, $event)"
+      (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">
+      <nz-embed-empty [nzComponentName]="'cascader'" [specificContent]="nzNotFoundContent"></nz-embed-empty>
+    </li>
+  </ul>
   </div>
 </ng-template>
diff --git a/components/cascader/nz-cascader.component.ts b/components/cascader/nz-cascader.component.ts
@@ -95,7 +95,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
   @Input()
   get nzOptions(): CascaderOption[] { return this.columns[ 0 ]; }
   set nzOptions(options: CascaderOption[] | null) {
-    this.columnsSnapshot = this.columns = options && options.length ? [ options ] : [];
+    this.columnsSnapshot = this.columns = options && options.length ? [ options ] : [ [] ];
     if (!this.isSearching) {
       if (this.defaultValue && this.columns.length) {
         this.initOptions(0);
@@ -648,6 +648,10 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
     const results: CascaderSearchOption[] = [];
     const path: CascaderOption[] = [];
 
+    // if (!this.nzOptions.length) {
+    //   return;
+    // }
+
     const defaultFilter = (inputValue: string, p: CascaderOption[]): boolean => {
       return p.some(n => {
         const label = this.getOptionLabel(n);

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) {
   }