当 mat-select 中只选择一个选项时，动态禁用 mat-option

Question

我有一个 mat-select 允许进行多项选择，其中必须始终选择至少一个选项。为了提供良好的 UX，当在 mat-select 中只选择一个选项时，我只想禁用此特定选项（因此将其显示为灰色）以防止用户取消选择它，这将导致没有选项(s) 选择。一旦选择了多个垫子选项，我想自动重新启用以前禁用的垫子选项。

所以最初的 mat-select 看起来像这样：

当用户仅取消选择三个选项之一时，不会发生任何事情。但是当用户取消选择一个选项并且这个“取消选择”导致只有一个选择的选项时，我希望 mat-select 看起来像这样（禁用其余选项但保持启用取消选择的选项）：

一旦用户重新选择一个选项并且不再只选择一个选项，则应启用所有 mat-options。

不知何故，我无法达到预期的结果。一旦我只选择了一个选项，整个 mat-select 就会被禁用，以防止用户重新选择另一个 mat-option。

这是我正在使用的代码：

<mat-option *ngFor="let option of optionsArray"
            [value]="option" 
            [disabled]="this.exampleForm.controls['dropDown'].value.length < 2">
  {{option}}
</mat-option>

我在一个最小的 StackBlitz 中重新创建了我的问题，显示了我在我的项目中使用的结构（使用 FormControls、FormGroups 等）

https://stackblitz.com/edit/angular-ivy-3tsyok?file=src/app/app.component.ts

非常感谢任何帮助。 谢谢

附注。对于任何想知道的人来说，我通过 Chrome DevTools 操作 CSS 创建了这些屏幕截图，我实际上并没有成功实现预期的结果。

Answer 1

您应该在 mat-option 循环中添加一个条件，以确保仅禁用选定的选项：

<mat-option *ngFor="let option of optionsArray" 
 [value]="option" 
 [disabled]="exampleForm.controls['dropDown'].value.length < 2 && 
      exampleForm.controls['dropDown'].value[0] === option">
 {{option}}
</mat-option>

https://stackblitz.com/edit/angular-ivy-z3lret?file=src%2Fapp%2Fapp.component.html