PrimeNG Menubar修改MenuItem模型后未自动重渲染问题咨询

PrimeNG Menubar 组件未对传入的MenuItem数组做深度变更检测，Angular 默认的变更检测逻辑仅会追踪输入属性的引用变化，不会监听数组内部对象的属性修改。
直接执行this.items[1].visible = false时，items数组本身的引用没有发生变化，Menubar 组件无法感知到配置更新，因此不会触发视图重绘。只有当鼠标移入菜单项触发组件内部的hover交互事件时，组件才会重新读取所有MenuItem的配置执行渲染，此时修改后的visible属性才会生效，对应菜单项才会隐藏。

以下三种方式都可以解决更新不及时的问题，可根据项目场景选择：

• 重新赋值数组引用（最通用、无额外依赖）
  修改完菜单项属性后，通过展开运算符生成新的数组，变更items的引用，主动触发组件的变更检测：

  this.items[1].visible = false;
  this.items = [...this.items];
  

• 手动触发变更检测
  在组件中注入ChangeDetectorRef，修改配置后主动调用检测方法强制刷新视图：

  import { ChangeDetectorRef } from '@angular/core';
  
  constructor(private cdr: ChangeDetectorRef) {}
  
  // 修改菜单配置的逻辑中
  updateMenu() {
    this.items[1].visible = false;
    this.cdr.detectChanges();
  }
  

• 通过组件实例触发刷新
  给Menubar组件添加模板引用，直接调用组件实例的变更检测方法标记更新：

  <!-- 组件模板 -->
  <p-menubar #menuBar [model]="items"></p-menubar>
  

  import { ViewChild } from '@angular/core';
  import { Menubar } from 'primeng/menubar';
  
  @ViewChild('menuBar') menuBar: Menubar;
  
  updateMenu() {
    this.items[1].visible = false;
    this.menuBar.cd.markForCheck();
  }
  

内容的提问来源于stack exchange，提问作者Sebastian