ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. with Ngclass on mat-tab-group

Question

所以我想让 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 中更改变量，所以正确检测到更改吗？
谢谢！

Answer 1

这个问题是因为 selectedIndex 在检查 [ngClass] 之后可能会在选项卡组内发生变化。您需要收听 (selectedTabChange) 并手动跟踪所选索引。

最短代码示例：

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

css