如何在 primeng 菜单栏上使用 *ngIf？我在显示基于身份验证的登录和注销时尝试使用它

Question

我们在使用 primeng 菜单栏时只有一个 p-menubar 标签。一切都在 ts 文件中。如何在特定项目上使用 *ngIf 或 *ngswitch。

onAuthStateChanged(auth, (User)=>{
  this.show= !this.show
  this.user=JSON.parse(JSON.stringify(User)).displayName 
})
 



this.items = [
  {
    label: 'Home',
    icon: 'pi pi-fw pi-home',
    routerLink: '/'
  },
  {
    label: 'Shopping Cart',
    icon: 'pi pi-fw pi-shopping-cart',
    routerLink: 'shopping-kart'
  },
  {
    label: 'Login',
    icon: 'pi pi-fw pi-sign-in',
    routerLink: 'login',
    visible : this.show,
  },
  {
    label: 'User Name',
    icon: 'pi pi-fw pi-user',
    items: [
      { label: 'My Orders', icon: 'pi pi-fw pi-shopping-bag', routerLink: 'my-orders' },
      { label: 'Manage Orders', icon: 'pi pi-fw pi-sync', routerLink:'admin/orders' },
      { label: 'Manage Products',icon:'pi pi-fw pi-tags', routerLink:'admin/products' },
      {label : 'Logout' , icon :'pi pi-fw pi-sign-out', command: () =>this.logOut()}
    ]
  }
];

Answer 1

MenuItem class 有一个名为：'visible' 的属性。您可以在 ts 文件中使用您的条件。

yourMenuItems: MenuItem[] = [
    {
      label: 'demo label',
      command: (): void => yourFunction(),
      visible: booleanBasedOnLoginStatus 
    },]

如何在 primeng 菜单栏上使用 *ngIf？我在显示基于身份验证的登录和注销时尝试使用它

How can I use *ngIf on primeng menubar? I am trying to use it when displaying login and logout based on authentication

angular

typescript

frontend

primeng

angular13