nested menu throw ExpressionChangedAfterItHasBeenCheckedError

[noob9527]

I'm submitting a...

[ x ] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Support request => Please do not submit support request here

Current behavior

throw ExpressionChangedAfterItHasBeenCheckedError

Minimal reproduction of the problem with instructions

1. create project

ng new whatever

2. create MenuItemComponent

import { Component, Input, OnInit } from '@angular/core';

@Component({
  selector: 'app-menu-item',
  template: `
    <li nz-menu-item></li>
    <li nz-submenu *ngIf="menuItem.hasSubmenu"></li>
  `,
  styleUrls: ['./menu-item.component.css']
})
export class MenuItemComponent implements OnInit {

  @Input() menuItem: any;

  constructor() { }

  ngOnInit() {
  }

}

3. update AppComponent

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
  <nz-layout>
    <nz-sider [nzTrigger]="null">
        <ul nz-menu [nzMode]="'inline'">
          <app-menu-item
            [menuItem]="item"
            *ngFor="let item of menuItems"
          >
          </app-menu-item>
        </ul>
    </nz-sider>
  </nz-layout>
  `,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  menuItems = [
    {
      hasSubmenu: false,
    },
    {
      hasSubmenu: true,
    },
  ];
}

Error occurs:

MenuItemComponent.html:2 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'null'. Current value: '24'.
    at viewDebugError (core.es5.js:8434)
    at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8412)
    at checkBindingNoChanges (core.es5.js:8576)
    at checkNoChangesNodeInline (core.es5.js:12456)
    at checkNoChangesNode (core.es5.js:12422)
    at debugCheckNoChangesNode (core.es5.js:13202)
    at debugCheckRenderNodeFn (core.es5.js:13142)
    at Object.eval [as updateRenderer] (MenuItemComponent.html:2)
    at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13124)
    at checkNoChangesView (core.es5.js:12244)

Environment

Angular version: 4.4.3

ng-zorro-antd version: 0.5.1

[vthinkxie]

@noob9527 bug confirm, will be fixed next version. You can use [hidden] instead of *ngIf as a temp solution, thanks for your feedback.

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.