Angular中*ngIf条件为false时未移除元素且DOM持续生成重复元素的问题求助

各位Angular开发者们好，我最近在开发Angular 14+版本的项目时，遇到了一个非常诡异的问题，折腾了好久都没找到原因，想在这里求助大家！

问题场景 #

我有一个子组件post-card.component.html，里面写了一段很简单的测试模板：

<span>{{ post.showComments }}</span> 
<span *ngIf="post.showComments">Amazing....!</span>

按道理说，当post.showComments为true时显示Amazing....!，为false时应该把这个<span>从DOM里移除，但实际运行时，我不仅看到true后面跟着一堆重复的Amazing....!，就算把post.showComments切换为false，之前生成的Amazing....!也完全不会消失，多次切换后DOM里的这个元素只会越来越多。

组件间的交互逻辑 #

父组件posts.component.ts通过*ngFor渲染多个app-post-card子组件，代码如下：

<app-post-card *ngFor="let post of posts; let i = index; trackBy: trackByPostId" 
               [post]="post" 
               [index]="i" 
               [showComments]="post.showComments" ... >
</app-post-card>

切换post.showComments状态时，我用了不可变更新的方式：

this.posts = this.posts.map((p, i) => {
  if (i === index) {
    return { ...p, showComments: !p.showComments };
  }
  return p;
});

我已经排查过的点 #

• post.showComments的状态切换是正常的：子组件里能正确显示true/false的变化，ngOnChanges()也能打印出预期的状态过渡日志
• 确认trackByPostId是正确的：返回的是每个post唯一且稳定的feedID字符串，不会导致*ngFor重复渲染组件
• 验证过每个post只会对应一个app-post-card组件：通过日志确认没有重复实例化的情况
• 尝试过用ng-template + ViewContainerRef手动管理视图，调用clear()和destroy()，问题依然存在
• 打印了ngOnInit和ngOnDestroy钩子，确认组件没有被频繁销毁重建
• 项目里没有引入任何会修改DOM的第三方库或动画库

预期vs实际 #

预期行为：当post.showComments变为false时，Angular应该销毁*ngIf对应的视图区块，将<span>从DOM中移除
实际行为：DOM中的Amazing....!元素持续累加重复，完全不会被移除

想请教的问题 #

有没有大佬遇到过类似的情况？会不会是Angular的视图缓存机制因为组件嵌套过深或者diffing逻辑出错导致的？有没有什么针对性的调试策略或者排查方向可以推荐给我？非常感谢！

内容来源于stack exchange