Angular 类 ng-star-inserted 覆盖我的类答案

【问题标题】：Angular class ng-star-inserted overwrite my classAngular 类 ng-star-inserted 覆盖我的类
【发布时间】：2021-12-24 16:53:13
【问题描述】：

我有一个基本的选择元素。我试图给它一个具有一些属性的类，但问题是我的类被一个角类“ng-star-inserted”覆盖。我怎样才能强制元素参加我的课程？ HTML：

<mat-form-field appearance="fill">
  <mat-label>Cars</mat-label>
  <select matNativeControl required>
    <option value="volvo" [ngClass]="{'test':isBold}">Volvo</option>
    <option value="saab">Saab</option>
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </select>
</mat-form-field>

CSS：

.test{ //I tried here with ::ng-deep before the class but it's not working
  font-weight: bold;
}

TS：

//...code
isBold:boolean=true; //always true for now

【问题讨论】：

不确定您的代码有什么问题，但这对您有用吗？ <option [class.test]="isBold">...?
如果这不起作用...您能否检查isBold 是否可用并在 HTML 中设置为正确的值？
不是。问题是我的课没有上。好像没用过。如果我在浏览器中检查元素，则没有我的类。
是的，如果isBold 可用，请调试。您可以使用{{ isBold }} 将其写在某处
stackoverflow.com/questions/7208786/… w3schools.com/howto/tryit.asp?filename=tryhow_custom_select 你可能会觉得这很有帮助

标签： html css angular typescript angular-material

【解决方案1】：

尝试为编译器添加 !important 来确定您的代码的优先级。如果不起作用，请尝试使用 ::ng-deep 和 !important

.test{
   font-weight: bold !important;
}

或

::ng-deep.test{
   font-weight: bold !important;
}

【讨论】：