Angular 如何制作'；垫选择'；只读？

我正在做一个角度5的项目。有许多

mat select

元素应该是只读的，就像文本框一样。我发现有一个

禁用的

功能：

  <mat-form-field>
    <mat-select placeholder="Choose an option" [disabled]="disableSelect.value">
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>

选择1
选项2（禁用）
选择3

哪个输出看起来像：

---

它会淡出文本，下面的衬里会发生更改，是否可以使其成为只读？

将CSS添加到选择块和mat表单字段块，这些可以自动应用到所有选择元素：

<mat-form-field class="readonly-wrapper">
  <mat-select class="readonly-block" placeholder="Choose an option" [disabled]="disableSelect.value">
    <mat-option value="option1">Option 1</mat-option>
    <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
    <mat-option value="option3">Option 3</mat-option>
  </mat-select>
</mat-form-field>  

---

您可以将可编辑选择与只读文本框和ngIf组合在一起：

  <mat-form-field>
    <mat-label>Choose an option</mat-label>
    <input *ngIf="!editing" mat-input formControlName="mySelect" [readonly]="true">
    <mat-select *ngIf="editing" formControlName="mySelect">
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>

选择一个选项
选择1
选项2（禁用）
选择3

No，不是以最常见的方式，因为它模仿HTML中的本机

select

选择器。[没有readonly属性][1]。[1] ：然后是可以禁用下拉列表的内容。尝试使用CSS禁用指针？除了文本框会显示“选项1”而不是“选项1”之外，这不会阻止元素聚焦并使用键盘选择选项

  <mat-form-field>
    <mat-label>Choose an option</mat-label>
    <input *ngIf="!editing" mat-input formControlName="mySelect" [readonly]="true">
    <mat-select *ngIf="editing" formControlName="mySelect">
      <mat-option value="option1">Option 1</mat-option>
      <mat-option value="option2" disabled>Option 2 (disabled)</mat-option>
      <mat-option value="option3">Option 3</mat-option>
    </mat-select>
  </mat-form-field>