如何使“ mat-select”只读？

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添加到选择块和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;
}

Answer 2

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

angular.module('aws-js-s3-explorer', [])
  .config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
  }).factory...

Answer 3

可以用输入框替换 mat-select 表单域，并用 mat-select 数据绑定输入框数据。