Question

我有一个mat-select选项，选择了这些选项后，我想禁用它们。例如：如果我选择“时间”，则应在“下一步”选择中禁用时间。我已经根据需要创建了一个https://stackblitz.com/edit/angular-anus7w?file=app%2Fselect-overview-example.ts堆栈炸弹。目前只有Key被禁用。但是，就我而言，现在下拉列表数据将动态生成，并且我无法对需要禁用的值进行硬编码。

所以我想要的是，如果我在mat-select 1中选择了一个虚拟值，那么应该在mat-select 2中禁用该值。类似地，我选择的值

Answer 1

您首先在表单中绑定了[(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 />

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
component I described in comments的所有逻辑

Answer 3

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

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

3 个答案: