垫子按钮组css上的角度材质徽章出错

Question

当我尝试在垫子按钮切换组上添加徽章时，只显示一半。

请找到以下

<mat-button-toggle-group #filtergroup="matButtonToggleGroup" value="myCase">
<mat-button-toggle value="myCase" matBadge="8" matBadgePosition="after">
My Cases
</mat-button-toggle>
<mat-button-toggle>
My Team
</mat-button-toggle>
</mat-button-toggle-group>

https://stackblitz.com/angular/emrqojllmka?file=app%2Fbadge-overview-example.html

如何使其以正确的方式显示？

Answer 1

为了避免截止，您需要覆盖mat-button-toggle-group:上的overflow属性

<mat-button-toggle-group #filtergroup="matButtonToggleGroup" value="myCase" style="overflow:visible">

但是，徽章仍将与相邻的按钮切换重叠。为了绕过这一点，你需要提高徽章类的z索引：

.mat-badge-content {
z-index: 1;
}

Answer 2

G。Tranter的回答非常有效，只是CSS必须使用ng深度

:host ::ng-deep .custom-mat-badge {
.mat-badge-content {
z-index: 1;
}
}

Answer 3

您可以使用*ngIf="toggleValue"；并指定您正在使用的css类。