使用只读问题更改输入字体颜色

Question

我正在尝试更改禁用输入的字体颜色。由于禁用时它是灰色的，我希望它显示为黑色。因此，我尝试使用只读，但它不起作用，现在输入没有显示它应该显示的内容。它只是说[对象对象]。这是我的 HTML 和 TS 代码。可能是什么问题？

HTML 代码：

<mat-form-field appearance="outline" fxFlex="50" class="pr-4">
                                <mat-label>Producer</mat-label>
                                <input matInput formControlName="Producer" readonly="readonly">
                                <mat-icon matSuffix class="disabled-text">short_text</mat-icon>
                                <mat-error>Producer is Mandatory!</mat-error>
                            </mat-form-field>

TS 代码：

 Producer: new FormControl(
                {
                    value:
                        this.order.ProducerSellerCode +
                        "-" +
                        this.order.ProducerSellerName,
                    readonly: true,
                },
                [Validators.required]
            ),

Answer 1

它显示 [object Object] 的原因是因为您正在为输入字段设置一个 js 对象。

如果你想改变一个只读输入的颜色，可以使用下面的css：

input:read-only {
  color: black;
}
//OR
input[readonly] {
  color: black;
}

如果您只想将其应用于选择元素，请将输入更改为类名。