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

Question

所以我想让mat-ink-bar具有来自同一个mat-tab-group的不同 colors 。 我正在使用本地参考和NgClass 。 styles 按预期工作，但在控制台中，它给了我这个

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 上的其他帖子时，似乎真假值也在不断变化，那么我使用的方法为什么会给我这个错误？ 是不是因为其他人选择在NgAfterViewChecked或NgOnChanges中更改变量，所以可以正确检测到更改？
谢谢！

Answer 1

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

最短的代码示例：

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