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

Question

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

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

原文由 Cpt Kitkat 发布，翻译遵循 CC BY-SA 4.0 许可协议

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

原文由 Chenna 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

主要观点：

• 带有构造函数的 Type.ts 模型文件，以 实现更好的交互。
• 为了便于在模板中使用， 我将选择器放入索引为“optI”的循环中。如果您需要使用不同的数据或逻辑进行选择，您可以像在示例中那样编写它们。请注意，mat-option 使用异步管道获取 Observable types$ | async
• 我在评论中描述的组件 的所有逻辑

原文由 Roman Lytvynov 发布，翻译遵循 CC BY-SA 4.0 许可协议