menu异常错误

[zjcboy]

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

menu需要区分是否有子项，遍历后浏览器会报一个错误。

console：

code：

layout.component.html

<nz-layout>
  <nz-sider nzCollapsible [(nzCollapsed)]="isCollapsed" [nzTrigger]="null">
    <div class="logo" *ngIf="isCollapsed">
    </div>
    </div>
    <!-- 侧边拦 -->
    <ul nz-menu [nzTheme]="'dark'" [nzMode]="isCollapsed?'vertical':'inline'">
      <ng-template ngFor let-item [ngForOf]="links | async">
        <li nz-menu-item *ngIf="item.type === 'link'" [routerLink]="['/', item.state]">
          <span title><i class="anticon anticon-user"></i><span class="nav-text">{{item.name}}</span></span>
        </li>
        <li nz-submenu *ngIf="item.type === 'sub'">
          <span title><i class="anticon anticon-user"></i><span class="nav-text">{{item.name}}</span></span>
          <ul>
            <li nz-menu-item *ngFor="let subItem of item.children" [routerLink]="['/', item.state, subItem.state]">{{subItem.name}}</li>
          </ul>
        </li>
      </ng-template>
    </ul>
  </nz-sider>
  <nz-layout>

    <!-- 头部 -->
    <nz-header style="background: #fff; padding:0;">
      <i class="anticon trigger" [class.anticon-menu-fold]="!isCollapsed" [class.anticon-menu-unfold]="isCollapsed" (click)="isCollapsed=!isCollapsed"></i>
    </nz-header>

    <!-- 内容区 -->
    <nz-content style="margin:0 16px;">
      <nz-breadcrumb style="margin:12px 0;">
        <nz-breadcrumb-item *ngFor="let breadcrumb of  breadcrumbs" [routerLink]="[breadcrumb.url]">{{breadcrumb.name}}</nz-breadcrumb-item>
      </nz-breadcrumb>
      <div style="padding:24px; background: #fff; min-height: 480px;">
          <router-outlet></router-outlet>
      </div>
    </nz-content>
    <nz-footer style="text-align: center;">Ant Design ©2017 Implement By Angular</nz-footer>
  </nz-layout>
</nz-layout>

layout.component.ts

import { Component, OnInit, ChangeDetectionStrategy } from "@angular/core";
import {
  Router,
  ActivatedRoute,
  ActivatedRouteSnapshot,
  UrlSegment
} from "@angular/router";

import { Observable } from 'rxjs/Observable';
import "rxjs/add/operator/filter";
import "rxjs/add/operator/map";

@Component({
  selector: "app-layout",
  // changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: "./layout.component.html",
  styleUrls: ["./layout.component.scss"]
})
export class LayoutComponent implements OnInit {
  public breadcrumbs: Array<any> = [];

  private links: Observable<any>;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) {

    this.links = Observable.of([
      {
        state: "dashboard",
        name: "首页",
        type: "link",
        icon: "icon-shouye_shouye1"
      },
      {
        state: "backend-manage",
        name: "后台管理",
        type: "sub",
        icon: "icon-shouye_shouye1",
        children: [
          { state: "vender", name: "供应商管理" },
          { state: "brand", name: "品牌管理" }
        ]
      },
      {
        state: "system-setting",
        name: "系统设置",
        type: "sub",
        icon: "icon-xitongshezhi",
        children: [
          { state: "user", name: "用户管理" },
          { state: "role", name: "角色管理" },
          { state: "navigation", name: "菜单管理" },
          { state: "bibles", name: "字典管理" }
        ]
      }
    ]);
  }

  ngOnInit() {
    this.parseRoute(this.router.routerState.snapshot.root);
    this.router.events.subscribe(event => {
      this.breadcrumbs = [];
      this.parseRoute(this.router.routerState.snapshot.root);
    });
  }

  parseRoute(node: ActivatedRouteSnapshot) {
    if (node.data["title"]) {
      let urlSegments: UrlSegment[] = [];
      node.pathFromRoot.forEach(routerState => {
        urlSegments = urlSegments.concat(routerState.url);
      });
      const url = urlSegments
        .map(urlSegment => {
          return urlSegment.path;
        })
        .join("/");
      this.breadcrumbs.push({
        name: node.data["title"],
        url: "/" + url
      });
    }

    if (node.firstChild) {
      this.parseRoute(node.firstChild);
    }
  }
}

实现效果图：

[vthinkxie]

please provide the STEPS TO REPRODUCE this error, thanks

[zjcboy]

update code img

[vthinkxie]

@zjcboy please provide source code other than img, so that we can reproduce this error. thanks

[vthinkxie]

@zjcboy this code work fine for me when comment ngOnit hook and parseRoute function, Observable.of & async pipe is supported.

[vthinkxie]

@zjcboy , the error has been reproduced in #367 , please check the next version, thanks.

[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.