Angular:NgStyle使用input:：first-line突出显示文本框中的单词？

如何突出显示文本框中的内容？以下操作不起作用。当前正在使用材质文本框

需要基于布尔变量highlightTextFlag有条件地应用它，可能是ngstyle

示例：

input::first-line { 
   background-color: green !important; 
}

<mat-form-field>
    <mat-label>Test</mat-label>   
    <input
        matInput 
        [ngStyle]="{'input::first-line': 'green' }"
    >
</mat-form-field>

实际代码：

input::first-line { 
   background-color: green !important; 
}

<mat-form-field>
    <mat-label>Test</mat-label>   
    <input
        matInput 
        [ngStyle]="{'input::first-line': 'green' }"
    >
</mat-form-field>

试验

---

您可以在组件css文件中添加css，但使用类名而不是输入选择器，如下所示：

.myInput::first-line{
//your css
}

并将类名绑定到组件模板中的布尔变量，如下所示

<mat-form-field>
    <mat-label>Test</mat-label>   
    <input
        matInput 
        [class.myInput]=“myBooleanVar”
    >
</mat-form-field>

试验