Angular：如何仅刷新ngFor循环中单个元素的DOM内容？

作为Angular新手，要是问题有点浅显还请多多包涵！我翻了好多类似问题，但都没解决我的实际困扰。

场景 #

我在组件模板里用*ngFor循环渲染groups数组，每个group项里包含按钮、带translate管道的标题，还有子项循环：

<div class="wrapper">
 <!-- 其他内容 -->
 ...
 <div *ngFor="let group of groups">
   <button #btn (click)="onClick(btn, group)">Change group title</button>
   <div class="group-title">
     {{group.title | translate}}
   </div>
   ...
   <div *ngFor="let item of group.subGroup">
     {{item.title}}
     ...
   </div>
 </div>
</div>

点击按钮会触发异步操作（我用setTimeout模拟Observable）修改单个group的内部属性（比如title或者info.count），但DOM就是不更新新值。

问题分析 #

查了资料知道Angular是通过对象引用检测变更的，修改对象内部属性不会触发变更检测事件。

现有思路及顾虑 #

• 深拷贝group对象然后替换数组对应项：这样会导致全量刷新，不符合我想要局部更新的需求；
• 在点击事件里调用markForCheck()：会触发所有group的重渲染；
• 为标题单独创建子组件：感觉太繁琐了，而且不确定能不能解决问题。

现在想请教各位，怎么才能强制Angular只刷新受影响的单个group的DOM内容呢？

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