ExpressionChangedAfterItHasBeenCheckedError：检查后表达式已更改在 mat-tab-group 上使用 Ngclass

问题描述

所以我想让 mat-ink-bar 与同一个 mat-tab-group 具有不同的颜色。我正在使用本地引用和 NgClass。 样式按预期工作，但在控制台中，它给了我这个

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'one. Current value: 'two'.

代码如下：
HTML：

<mat-tab-group
  class="<some other classes>"
  ...
  #tabGroup
  [ngClass]="tabGroup.selectedIndex === 1 ? 'one' : 'two'"
>

SCSS：

.one.mat-primary .mat-ink-bar{
  background: blue !important;
}

.two.mat-primary .mat-ink-bar{
  background: red !important;
}

当我查看 NgClass 上的其他帖子时，似乎 true 和 false 值也在不断变化，那么我使用的方法为什么会出现此错误？是否因为其他人选择在 NgAfterViewChecked 或 NgOnChanges 中更改变量，因此正确检测到更改？
谢谢！

解决方法

这个问题来自这样一个事实，即 selectedIndex 在选中 [ngClass] 后可能会在选项卡组内发生变化。您需要收听 (selectedTabChange) 并手动跟踪所选索引。

最短的代码示例：

<mat-tab-group 
  `(selectedTabChange)`="selectedTab = $event.index" 
  [ngClass]="selectedTab === 1 ? 'one' : 'two'"
>