0

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

4

1 回答 1

0

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

最短的代码示例：

<mat-tab-group 
  `(selectedTabChange)`="selectedTab = $event.index" 
  [ngClass]="selectedTab === 1 ? 'one' : 'two'"
>
于 2021-03-01T16:14:43.880 回答