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

#2846) * fix(module:cascader): fix searching error when nzOptions is an empty array * update empty demos close #2784 * test: add test
NG-ZORRO · Feb 13, 2019 · e33cc50 · e33cc50
1 parent 289ba54
commit e33cc50
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 77 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
@@ -713,6 +713,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/cascader/nz-cascader.spec.ts b/components/cascader/nz-cascader.spec.ts
@@ -1473,15 +1473,8 @@ describe('cascader', () => {
       fixture.detectChanges();
       const itemEl1 = overlayContainerElement.querySelector('.ant-cascader-menu:nth-child(1) .ant-cascader-menu-item:nth-child(1)') as HTMLElement;
       expect(testComponent.cascader.isSearching).toBe(true);
-      expect(itemEl1.innerText).toBe('Root');
-      itemEl1.click();
-      fixture.detectChanges();
+      expect(itemEl1.innerText.trim()).toBe('暂无数据');
       flush();
-      fixture.detectChanges();
-      expect(testComponent.cascader.isSearching).toBe(false);
-      expect(testComponent.cascader.menuVisible).toBe(false);
-      expect(testComponent.cascader.inputValue).toBe('');
-      expect(testComponent.values.join(',')).toBe('root');
     }));
     it('should re-prepare search results when nzOptions change', () => {
       fixture.detectChanges();
@@ -1797,39 +1790,7 @@ const options4 = [ {
   } ]
 } ];
 
-const options5 = [ {
-  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
-    } ]
-  } ]
-}, {
-  value : 'root',
-  label : 'Root',
-  isLeaf: true
-} ];
+const options5 = [];
 
 @Component({
   selector: 'nz-demo-cascader-default',

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>