ExpressionChangedAfterItHasBeenCheckedError: выражение изменилось после проверки. с Ngclass на mat-tab-group

Поэтому я хотел бы, чтобы 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'"
>

СКСС:

.one.mat-primary .mat-ink-bar{
  background: blue !important;
}

.two.mat-primary .mat-ink-bar{
  background: red !important;
}

Когда я просматривал другие сообщения в NgClass, мне казалось, что значения true и false также постоянно меняются, тогда почему метод, который я использую, дает мне эту ошибку? Это потому, что другие люди предпочитают изменять переменные внутри NgAfterViewChecked или NgOnChanges, чтобы изменения обнаруживались правильно?
Спасибо!


angular css angular-material mat-tab ng-class
person Wendy Zhang    schedule 01.03.2021    source источник
comment
Теперь мне интересно, есть ли способ напрямую стилизовать полосу чернил на разных вкладках?   -  person Wendy Zhang    schedule 01.03.2021
comment
Когда оно изменится с «один» на «два»? Я считаю эту статью действительно полезной blog.angular-university.io/angular-debugging и он даже покажет вам, как его отлаживать.   -  person AliF50    schedule 01.03.2021
comment
@AliF50 Спасибо!   -  person Wendy Zhang    schedule 01.03.2021

Ответы (1)


arrow_upward
0
arrow_downward

эта проблема возникает из-за того, что selectedIndex может измениться внутри группы вкладок после проверки [ngClass]. Вам нужно прослушать (selectedTabChange) и отследить выбранный индекс вручную.

Самый короткий пример кода:

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