如何在 Angular Mat-Select 中动态禁用特定选项

Question

我有一个列表，其中一个对象具有

name

和

id

属性：

[
  {
    "name": "open",
    "id": "1"
  },
  {
    "name": "inprogress",
    "id": "2"
  },
  {
    "name": "close",
    "id": "3"
  }
]

并使用 MatSelect 和 *ngFor 来迭代数组，并使用

[(ngModel)]

将当前状态与 select 绑定。

预期输出：

如果当前状态为

inprogress

，则禁用

open

选项

StackBlitz 示例

Answer 1

该示例无法正常工作，因为

selected

与

[value]="topping.id"

绑定，但逻辑使用

selected.id

，除了启动时之外，它不存在，因为您正在使用顶部对象初始化

selected

。

此外，逻辑

[disabled]="topping.id < selected.id"

可能有缺陷，因为当选择

inprogress

时它也会禁用

close

- 你可能想要这样 - 我不确定 - 但你只说你想在

open时禁用

inprogress 已选择。

使用

[value]="topping"

：

<mat-form-field>
    <mat-select placeholder="Toppings" [(ngModel)]="selected" [formControl]="toppings">
        <mat-option *ngFor="let topping of list" [value]="topping" [disabled]="selected.id === '2' && topping.id === '1'">{{topping.name}}</mat-option>
    </mat-select>
</mat-form-field>

或者改变

selected

的逻辑和初始化：

selected: any =  '2';

<mat-form-field>
    <mat-select placeholder="Toppings" [(ngModel)]="selected" [formControl]="toppings">
        <mat-option *ngFor="let topping of list" [value]="topping.id" [disabled]="selected === '2' && topping.id === '1'">{{topping.name}}</mat-option>
    </mat-select>
</mat-form-field>

Angular v6/7 及更高版本的更新

使用

[(value)]

而不是

[(ngModel)]

。 Angular v6 中已弃用对使用 ngModel 输入属性和 ngModelChange 事件与反应式表单指令的支持，并在 Angular v7 中删除。

Answer 2

如果用户可以选择多个选项，我们实际上也不需要 ngModel，下面是我的解决方案，用于在选择角度材料垫选择中的某些不同选项时禁用某些选项。

//toppings is a form control name for mat-select
this.toppings.valueChanges.subscribe((selection) => { 

this.selected = '';

//includes because in case we are using multi selection we will receive selection as array

if(selection.includes('inprogress')) // if index instead of name use index value
this.selected = 'inprogress' // selected is globally defined variable
)}

checkUserSelection(topping){

if(this.selected === 'inprogress' && topping === 'open')"{
return true;
}
return false
}

----------------- HTML 代码---------------------

<mat-form-field>
<mat-select placeholder="Toppings" 
[formControl]="toppings">

<mat-option *ngFor="let topping of list" 
<!-- Added null check for the topping field -->
[value]="topping?.id" 
[disabled]="checkUserSelection(topping)"
</mat-option>
</mat-select>

Answer 3

我在 HTML 中是这样做的

      <mat-select [(ngModel)]="algorithm">
        <mat-option
          *ngFor="let algo of algos"
          [value]="algo.name"
          [disabled]="!algo.allow">
          {{ algo }}
        </mat-option>
      </mat-select>

在 ts

 algos = ['FIFO', 'LIFO'];
    somefunctionCall(){ // Map the Array
        const fifoAllowed = false;
        isAllowed = (algo) => algo === 'FIFO' ? fifoAllowed : true;
        this.algos = this.algos.map(a => ({ name: a, allow: isAllowed(a) })
)}

Answer 4

您可以通过设置如下条件来禁用垫选择中的选项：

<mat-form-field>
  <mat-select placeholder="Toppings" [(ngModel)]="selected" [formControl]="toppings">
    <mat-option *ngFor="let topping of list" [value]="topping.id" [disabled]="topping.id < selected.id">{{topping.name}}</mat-option>
  </mat-select>
</mat-form-field>

<br> 

Answer 5

.container{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.header{
  flex-shrink: 0;
  flex-grow: 0;
  background: #039be5;
  padding: 3px 5px;
}
.content{
  flex-shrink: 1;
  flex-grow: 1;
  padding: 3px 5px;
  position: relative;
  overflow-y: auto;
}

.footer{
  flex-shrink: 0;
  flex-grow: 0;
  background: #eee;
  padding: 3px 15px;
}
p {
  font-family: Lato;
}

nav a {
  padding: 5px 10px;
  text-decoration: none;
  margin-top: 10px;
  display: inline-block;
  background-color: #eee;
  border-radius: 4px;
}

nav a:visited, a:link {
  color: #607D8B;
}
nav a:hover {
  color: #039be5;
  background-color: #CFD8DC;
}
nav a.active {
  color: #039be5;
}