fix(module:menu): fix menu ngfor bug (#1519)

NG-ZORRO · May 24, 2018 · 4f6c266 · 4f6c266
1 parent f7476bd
commit 4f6c266
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 4 deletions.
diff --git a/components/menu/nz-menu.spec.ts b/components/menu/nz-menu.spec.ts
@@ -28,7 +28,7 @@ describe('menu', () => {
     const dir = 'ltr';
     TestBed.configureTestingModule({
       imports     : [ NzMenuModule, NoopAnimationsModule, NoopAnimationsModule ],
-      declarations: [ NzDemoMenuHorizontalComponent, NzDemoMenuInlineComponent, NzDemoMenuInlineCollapsedComponent, NzDemoMenuSiderCurrentComponent, NzDemoMenuThemeComponent, NzDemoMenuSwitchModeComponent, NzTestMenuHorizontalComponent, NzTestMenuInlineComponent ],
+      declarations: [ NzDemoMenuHorizontalComponent, NzDemoMenuInlineComponent, NzDemoMenuInlineCollapsedComponent, NzDemoMenuSiderCurrentComponent, NzDemoMenuThemeComponent, NzDemoMenuSwitchModeComponent, NzTestMenuHorizontalComponent, NzTestMenuInlineComponent, NzDemoMenuNgForComponent ],
       schemas     : [ NO_ERRORS_SCHEMA ],
       providers   : [
         { provide: Directionality, useFactory: () => ({ value: dir }) },
@@ -423,6 +423,11 @@ describe('menu', () => {
         expect(submenu.nativeElement.classList.contains('ant-menu-submenu-open')).toBe(false);
       }));
     });
+    describe('ng-for', () => {
+      it('should ng for works fine', () => {
+        TestBed.createComponent(NzDemoMenuNgForComponent).detectChanges();
+      });
+    });
   });
 });
 
@@ -496,3 +501,37 @@ export class NzTestMenuInlineComponent {
   @ViewChild(NzSubMenuComponent) subsmenu: NzSubMenuComponent;
   @ViewChild('menuitem', { read: ElementRef }) menuitem: ElementRef;
 }
+
+@Component({
+  selector: 'nz-demo-menu-ngfor',
+  template: `
+    <ul nz-menu [nzMode]="'inline'" style="width: 240px;">
+      <li *ngFor="let l1 of menus" nz-submenu>
+        <span title><i class="anticon anticon-appstore"></i> {{l1.text}}</span>
+        <ul>
+          <li *ngFor="let l2 of l1.children" nz-submenu>
+            <span title>{{l2.text}}</span>
+            <ul>
+              <li *ngFor="let l3 of l2.children" nz-menu-item>{{l3.text}}</li>
+            </ul>
+          </li>
+        </ul>
+      </li>
+    </ul>`,
+  styles  : []
+})
+export class NzDemoMenuNgForComponent {
+  menus = [
+    {
+      text    : 'level1',
+      children: [
+        {
+          text    : 'level2',
+          children: [
+            { text: 'level3' }
+          ]
+        }
+      ]
+    }
+  ];
+}
diff --git a/components/menu/nz-submenu.component.ts b/components/menu/nz-submenu.component.ts
@@ -131,7 +131,7 @@ import { NzMenuDirective } from './nz-menu.directive';
     </ng-template>
   `,
   styles             : [
-      `
+    `
       .ant-menu-submenu-placement-bottomLeft {
         top: 6px;
         position: relative;
@@ -372,7 +372,7 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterContentInit {
     if (this.subMenus && this.subMenus.length) {
       this.subMenus.filter(x => x !== this).forEach(menu => {
         if (this.subMenuMode === 'inline') {
-          menu.level = this.level + 1;
+          Promise.resolve().then(() => menu.level = this.level + 1);
         }
         menu.isInSubMenu = true;
       });

diff --git a/site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.ts b/site_scripts/_site/src/app/share/nz-codebox/nz-codebox.component.ts
@@ -243,6 +243,7 @@ export class AppModule { }
       description : 'Created with <3 by the StackBlitz SDK!',
       template    : 'angular-cli',
       dependencies: {
+        'rxjs'                             : '^5.0.0',
         '@angular/cdk'                     : '^5.0.0',
         '@angular/core'                    : '^5.0.0',
         '@angular/forms'                   : '^5.0.0',
@@ -254,7 +255,7 @@ export class AppModule { }
         '@angular/router'                  : '^5.0.0',
         '@angular/animations'              : '^5.0.0',
         'date-fns'                         : '^1.29.0',
-        'ng-zorro-antd'                    : 'next'
+        'ng-zorro-antd'                    : '^0.7.0'
       },
       tags        : [ 'stackblitz', 'sdk' ]
     });