如何解决ExpressionChangedAfterItHasBeenCheckedError:检查后表达式已更改在 mat-tab-group 上使用 Ngclass
所以我想让 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
中更改变量,因此正确检测到更改?
谢谢!
解决方法
这个问题来自这样一个事实,即 selectedIndex
在选中 [ngClass]
后可能会在选项卡组内发生变化。您需要收听 (selectedTabChange)
并手动跟踪所选索引。
最短的代码示例:
<mat-tab-group
`(selectedTabChange)`="selectedTab = $event.index"
[ngClass]="selectedTab === 1 ? 'one' : 'two'"
>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。