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'"
>