如何解决Angular编程式切换标签时的NG0100表达式变更检查错误

我正在开发基于 Angular 15.1.1 和 Angular Material 15.1.1 的应用，控制台持续抛出 NG0100 ExpressionChangedAfterItHasBeenCheckedError 错误，常规解决方法均无效。

场景说明 #

使用 mat-tab-group 实现两个标签页：

• 第一个标签页包含带 matAutocomplete 的 matInput 字段，用于搜索并选择复杂对象；
• 第二个标签页的表单字段展示选中对象的详情。

当用户选择自动完成项时，控制器会用选中对象的数据填充第二个标签页表单，并编程式切换到第二个标签页，正是这个切换操作触发了错误。

核心代码片段 #

输入框及自动完成的 HTML 代码

<mat-form-field class="example-full-width" appearance="fill">
  <mat-label>Select 1, 2, or 3</mat-label>
  <input
    type="text"
    matInput
    [formControl]="myControl"
    [matAutocomplete]="auto"
  />
  <mat-autocomplete #auto="matAutocomplete">
    <mat-option
      *ngFor="let option of filteredOptions | async"
      [value]="option"
    >
      {{option.name}}
    </mat-option>
  </mat-autocomplete>
</mat-form-field>

选择逻辑的控制器代码

ngOnInit() {
  this.myControl.valueChanges
    .pipe(filter((value) => typeof value == 'object'))
    .subscribe((value) => this.setSelectedValue(value as TestData));
}

private setSelectedValue(value: TestData) {
  this.selectedValue = value;
  this.myControl.setValue('');
  this.tabIndex = 1;
}

错误原因分析 #

测试后发现，错误与 mat-form-field-hide-placeholder 值的变更有关：切换标签页时第一个标签页的输入框失去焦点，导致表单标签的显示方式改变。该错误仅在部分浏览器出现（如 Chrome），Firefox 中不会触发，因为 Firefox 切换标签时输入框不会失去焦点。

已尝试的无效方法 #

• 手动触发 Angular 变更检测；
• 用 setTimeout 包裹切换标签的逻辑；

目前唯一有效的方法是给输入框添加 *ngIf，使其在第一个标签未选中时从 DOM 中移除，但这会引入不期望的 UI 行为变化（比如输入框重新渲染时的状态丢失）。

问题1：还有其他消除 NG0100 错误的方法吗？ #

问题2：留着该错误的风险 #

虽然我通常会在开发阶段消除这类错误，但本次受影响的控件在触发错误时已经不可见，似乎不会导致 UI 不稳定。请问留着这个错误有什么潜在风险？

内容的提问来源于stack exchange，提问作者Jack A.