Angular 动态设置mat选项卡的背景色

我希望能够根据条件设置选项卡的颜色，就像我在提供的stackblitz项目中使用content类对div所做的那样。如果

selectedMarketStatus===marketStatus.Open

语句为true，我希望内容div和选项卡都为绿色。这可能吗？如果是，我该怎么做

编辑：更新了blitz哪种做了我想要的，在&-closed上的scss样式在stackblitz上不起作用，但它在我的项目中起作用

导出类选项卡GroupTheMee示例{
public marketStatus=MarketPurchaseStatus；
public selectedMarketStatus=this.marketStatus.Open；
构造函数（）{}
}
导出枚举MarketPurchaseStatus{
BeforeOpen=0，
打开=1，
后关闭=2
}

.content{
背景颜色：灰色；
}
.打开{
背景颜色：绿色；
}

aaaa
bbbb
aaaaaa

使用条件样式来实现这一点。我相信这会对你有所帮助

如果添加样式：

<some-element [ngStyle]="{'backgroundColor':  (selectedMarketStatus === marketStatus.Open) ? 'green' : ''}">element</some-element>

元素

如果您有类似于上述的类，请使用以下代码：

<some-element [ngClass]="{'green': selectedMarketStatus === marketStatus.Open }">...</some-element>

。。。

请查看有关和的角度文档

---

请查看您的更新版本，我最终为选项卡创建了一个全局样式，并使用父选择器创建了一个“打开”和一个“关闭”的样式，然后我可以在组件中有条件地在这两个样式之间切换

也在我原来的帖子中更新了闪电战

选项卡样式。scss:

。订阅市场选项卡{
&-打开{
/*删除选项卡下方的底部边框*/
.mat制表符标题{
边框底部：无；
/**黑客隐藏.mat选项卡主体包装器和活动选项卡之间的边界*/
变换：translateY（1px）；
z指数：1000；
}
//coordinet组件顶部横幅（右侧）中选项卡的样式
.mat选项卡列表{
//删除下划线
墨水条{
显示：无；
}
//带圆角的标签。
.mat标签{
颜色：黑色；//TODO:主题颜色
.mat标签{
高度：72px；
填充：0 48px；
边界半径：10px 10px 0px 0px；
背景色：#F2F8FF；
颜色：黑色；
边框：1px实心#D0DCEA；
字号：600；
&.mat选项卡标签处于活动状态{
边框底部：无；
最小宽度：160px！重要；
背景色：#D6ECEC；//TODO:主题色
颜色：黑色；//TODO:主题颜色
不透明度：1；
字号：700；
}
}
}
}
}
&-封闭的{
/*删除选项卡下方的底部边框*/
.mat制表符标题{
边框底部：无；
/**黑客隐藏.mat选项卡主体包装器和活动选项卡之间的边界*/
变换：translateY（1px）；
z指数：1000；
}
//coordinet组件顶部横幅（右侧）中选项卡的样式
.mat选项卡列表{
//删除下划线
墨水条{
显示：无；
}
//带圆角的标签。
.mat标签{
颜色：黑色；//TODO:主题颜色
.mat标签{
高度：72px；
填充：0 48px；
边界半径：10px 10px 0px 0px；
背景色：#F2F8FF；
颜色：黑色；
边框：1px实心#D0DCEA；
字号：600；
&.mat选项卡标签处于活动状态{
边框底部：无；
最小宽度：160px！重要；
背景色：#E7F0FA；//TODO:主题色
颜色：黑色；//TODO:主题颜色
不透明度：1；
字号：700；
}
}
}
}
}
}

谢谢您的回答，但这似乎不适用于Mat选项卡元素？什么都没有发生。我看不到你发送的链接有任何更改？我可以像往常一样在其他元素上使用它，但我的问题是我无法在mat选项卡元素上完成。请看这个漂亮的，我也做了，但是只有选项卡中的文本获得了新的背景色，我需要整个选项卡来更改颜色。