typescript 是否可以< mat-hint>从打印脚本Angular 5设置文本颜色

zpqajqem  于 2023-03-19  发布在  TypeScript
关注(0)|答案(4)|浏览(94)

我是新的Angular 5在这里,我试图设置不同的提示颜色的基础上的条件。

<mat-hint style="color:#32CD32">{{hintOTP}}</mat-hint>

通过使用上面的代码行,我可以为提示文本设置特定的文本颜色。
我知道另一种实现我的目标的方法是保持不同的垫子提示,并根据验证隐藏和显示它们。
我想知道有没有其他方法可以有效地从 typescript 或?

dohp0rv5

dohp0rv51#

在HTML中使用以下代码:

<mat-hint [ngStyle]="{color: hintColor}">HINT</mat-hint>

然后,在TS代码中,您可以像这样更改颜色:

this.hintColor = '#ff0000'

这会将提示变为红色。

**一个

f1tvaqid

f1tvaqid2#

CSS文件中:

mat-hint {
   color: #32CD32 !important;
}
jtw3ybtb

jtw3ybtb3#

我在代码中执行此操作以更改背景色

<nav mat-tab-nav-bar [backgroundColor]="background">
    <mat-icon (click)="toggleBackground()">invert_colors</mat-icon>

    toggleBackground() {
        this.background = this.background ? '' : 'primary';
      }
72qzrwbm

72qzrwbm4#

也可以使用类。
即:
html文件中:

<mat-form-field>
    <input matInput placeholder="Enter some input">
    <mat-hint class="some-color">some hint</mat-hint>
  </mat-form-field>

CSS文件中:

.some-color {
   color: #4caf50; /* green */
}

相关问题