Как сделать «выбор коврика» только для чтения?

Question

Я работаю над угловым 5 проектом.Есть много mat-select элементов, которые должны быть только для чтения, как текстовые поля.Я обнаружил, что есть функция disabled, которая:

  <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>

, которая выглядит следующим образом:

Текст затемняется, а подкладка ниже вносит изменения, возможно ли сделать его доступным только для чтения?

Answer 1

Добавьте CSS как к блоку select, так и к блоку mat-form-field, они могут применяться автоматически ко всем выбранным элементам:

<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>  

Код CSS :

.readonly-wrapper {
    cursor: not-allowed;
}

.readonly-wrapper .readonly-block {
    pointer-events: none;
}