1

我正在开发一个角度应用程序。我正在使用 mat-form-field 如下。

<mat-form-field appearance="fill">
    <mat-label id="title">{{ title }}
    </mat-label>
    <input formControlName="title" matInput id="title" (click)='updateValue("title")' readonly>
</mat-form-field>

我得到一个带有上述代码的矩形表单域。当我将鼠标悬停在垫子表单字段的底线上时，例如当我将鼠标放在特定表单字段的底部时，我想更改颜色。为此，我正在起诉 CSS

.mat-form-field-ripple {
    background-color: #00798e;
}

默认情况下，它会更改垫子表单字段的基础颜色。我在这里面临的问题是我想要在其他情况下使用不同的颜色。例如，在我的组件中，我有一个变量，如果它的值为 X，那么我想要上面的颜色，如果它的值为 Y，那么我想应用不同的波纹颜色。由于 mat-form-field-ripple 似乎在 mat 表单字段的内置属性中，我无法在运行时更改颜色。我在上面的代码中给出的任何颜色都适用于每种情况。但我想在不同的条件下有不同的颜色。我怎样才能做到这一点？

4

1 回答 1

0

您可以将 HTML 元素的颜色绑定到变量。就像是：

<mat-form-field [style.background-color]="color">

并在您的 .ts 文件中定义变量颜色

color: string = "red"

这样，每当您更改变量颜色的值时，元素的背景颜色也应该改变。

于 2020-06-30T19:30:20.893 回答