javascript - http请求前的数据过滤完全

Question

我通过http请求获取了所有的菜单列表，然后将其传递给vertical moudle， 然后垂直模块使用菜单列表过滤父菜单，但是当垂直模块过滤时，http请求没有完全获取数据，我该如何解决这个问题？谢谢!

export class SidenavComponent implements OnInit {
  public menuItems: Array<any>;
  public settings: Settings;

  constructor(public appSettings: AppSettings, public menuService: MenuService) {
    this.settings = this.appSettings.settings;
  }

  ngOnInit() {
    this.menuItems = this.menuService.getVerticalMenuItems();
  }

}

<div id="vertical-menu" [perfectScrollbar]="psConfig" [disabled]="!settings.fixedSidenavUserContent">
    <app-vertical-menu [menuItems]="menuItems" [menuParentId]="0"></app-vertical-menu>
  </div>

export class VerticalMenuComponent implements OnInit {
  @Input('menuItems') menuItems;
  @Input('menuParentId') menuParentId;
  parentMenu: Array<any>;
  public settings: Settings;

  constructor(public appSettings: AppSettings, public menuService: MenuService) {
    this.settings = this.appSettings.settings;
  }

  ngOnInit() {
// when filter the menuItems.length=0
    this.parentMenu = this.menuItems.filter(item => item.parentId === this.menuParentId);
  }

}

<div *ngFor="let menu of parentMenus" class="menu-item">

</div>

Answer 1

你可以尝试在 child 身上设置功能:

  parentMenu;
  @Input()
  set menuItems(passedValue: any[]) {
    console.log(passedValue)
        if (!passedValue.length) {
            return;
        } else {
            this.parentMenu = passedValue.filter(item => item.parentId === this.menuParentId);
        }  
    }
}

DEMO 🚀🚀