选择后如何禁用 Mat-Select 选项

Question

我有一个 mat-select，一旦我选择了这些选项，我想禁用它们。 例如：如果我选择时间，则应在下一个垫选择中禁用时间。 我创建了一个 stackblitz https://stackblitz.com/edit/angular-anus7w?file=app%2Fselect-overview-example.ts 我的要求。目前只有密钥被禁用。但是在我的情况下，现在将动态生成下拉数据，我无法对需要禁用的值进行硬编码。

所以我想要的是，如果我在 mat-select 1 中选择一个特殊值，那么应该在 mat-select 2 中禁用该值。同样，我选择的值

Answer 1

    <mat-form-field>

      <mat-select [(value)]="selected" [placeholder]="!selected  ? 'Your custom placeholder' : ''">
        <mat-option value="1">Option 1</mat-option>
        <mat-option value="2">Option 2</mat-option>
        <mat-option value="3">Option 3</mat-option>
        <mat-option value="4">Option 4</mat-option>
        <mat-option value="5">Option 5</mat-option>
      </mat-select>

    </mat-form-field>

Answer 2

请查看我的解决方案https://stackblitz.com/edit/angular-anus7w-9ovxqd?file=app%2Fselect-overview-example.ts

我使用 Observable 和一个数组属性来存储所有选择的值

主要思想：

• Type.ts model file with constructor 以便更好地互动。
• For ease in template 我将选择器放入带有索引“optI”的循环中。如果您需要使用不同的数据或逻辑进行选择，您可以像在示例中那样编写它们。请注意，mat-option 获得一个带有异步管道 types$ | async 的 Observable
• component I described in comments的所有逻辑

Answer 3

您首先在表单中绑定[(ngModel)]="firstOption"，然后再进行验证。这里不需要更改事件

在component 文件中：

firstOption = '';
secondOption = '';
thirdOption = '';
fourthOption = '';

在模板 html 文件中

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="firstOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === thirdOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="secondOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === firstOption.type ||
        type.text === thirdOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="thirdOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === firstOption.type ||
        type.text === fourthOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />
<mat-form-field>
  <mat-select placeholder="Type" [(ngModel)]="fourthOption">
    <mat-option
      *ngFor="let type of typeColumn; let i = index"
      [value]="{ type: type.text, index: i }"
      [disabled]="
        type.text === secondOption.type ||
        type.text === thirdOption.type ||
        type.text === firstOption.type
      "
    >
      {{ type.text }}
    </mat-option>
  </mat-select>
</mat-form-field>
<br />