在ngFor中调用getGroupedFiles()导致matMenu失效的原因咨询

核心问题：频繁DOM重建打断了MatMenu的初始化 #

• Angular的*ngFor通过引用对比判断是否需要重新渲染列表项。每次调用getGroupedFiles()返回新数组时，数组的引用都是全新的，这会让*ngFor判定整个列表已变更，随即销毁所有旧列表项、重新创建新的组件实例。
• MatMenu的触发逻辑（比如matMenuTriggerFor）依赖绑定在列表项内的MatMenuTrigger指令完成初始化。但列表项刚创建就被下一次变更检测销毁，指令根本没机会完成与菜单的绑定，点击触发按钮时自然没有任何响应——连cdk-overlay-container都不会创建，因为触发器实例从未真正初始化成功。

缓存变量能正常工作的原因 #

当直接返回缓存的groupedFiles变量时，数组的引用始终保持不变。*ngFor检测到引用未变化，就不会重新渲染列表项，MatMenu的指令能顺利完成初始化流程，绑定的点击事件和菜单逻辑也就正常运行了。

避坑提示 #

• 绝对不要在模板绑定（*ngFor、插值表达式、属性绑定等场景）里调用会返回新对象/数组的方法，这不仅会导致组件功能异常，还会引发频繁的变更检测，严重拖慢页面性能。
• 如果需要动态计算分组数据，建议在组件的ngOnInit、数据更新钩子（比如ngOnChanges）里提前计算好结果，赋值给组件属性后再在模板中绑定这个属性。

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