时间戳

首页 > 解决方案 > 在 nb 菜单项中使用 *ngIf

angular - 在 nb 菜单项中使用 *ngIf

问题描述

如何*ngIf在<nb-menu [items]="items">菜单中使用？我有这样的东西

<nb-menu [items]="items"> </nb-menu>

在我的 .ts

items: NbMenuItem[] = [
    {
      title: 'Aliases',
      icon: 'list-outline',
      link: 'aliases'
    },
    {
      title: 'Aliases to accept',
      icon: 'checkmark-outline',
      link: 'toAccept'
    },

我只想为管理员授予“toAccept”访问权限

在我做这样的事情之前：

  <li *ngIf="showForAdmin">
        <a href="/toAccept" class="nav-link" routerLink="toAccept">
          <nb-icon icon="checkmark-outline"></nb-icon>Aliases to accept
        </a>
      </li>

它工作正常

我怎样才能在星云中做类似的事情？

标签： angularngx-bootstrapnebular

解决方案

您可以根据 .ts 文件中的变量添加所需的菜单项

import { USER_MENU_ITEMS } from './pages-menu';
import { NbMenuService, NbMenuItem } from '@nebular/theme';

export class PagesComponent {

  menu = USER_MENU_ITEMS;
  showForAdmin = true;

adminMenuItem: NbMenuItem[] = [
    {
      title: 'Admin',
      group: true,
    },
    {
      title: 'Management',
      icon: 'browser-outline',
      children: [
    {
      title: 'User Details',
      link: '/path/users',
    },
    ],
   },
  ]


constructor( private nbMenuService: NbMenuService ) {
    this.addAdminMenu(this.showForAdmin);
  }

  addAdminMenu(showForAdmin){
    if (showForAdmin === true)
    {
      this.nbMenuService.addItems(this.adminMenuItem);
    }
  }

}

推荐阅读