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

【问题标题】：ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. with Ngclass on mat-tab-groupExpressionChangedAfterItHasBeenCheckedError：表达式在检查后已更改。在 mat-tab-group 上使用 Ngclass
【发布时间】：2021-05-31 02:49:33
【问题描述】：

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

【问题讨论】：

现在我想知道是否有一种方法可以直接在不同的 mat-tabs 上设置墨条的样式？
什么时候从“一”变成“二”？我觉得这篇文章真的很有帮助blog.angular-university.io/angular-debugging，它甚至会告诉你如何调试它。
@AliF50 谢谢！

标签： css angular angular-material ng-class mat-tab

【解决方案1】：

这个问题来自于selectedIndex 可能在[ngClass] 被检查后在标签组内发生变化。您需要收听(selectedTabChange) 并手动跟踪所选索引。

最短的代码示例：

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

【讨论】：