代码之家 › 专栏 › 技术社区 › Prashant Pimpale Dila Gurung

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

angular-material-5 angular-material2 angular

1

Prashant Pimpale Dila Gurung · 技术社区 · 7 年前

我有一个列表,上面有一个对象 name 和 id 属性:

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

使用MatSelect和*ngFor遍历数组,并使用select绑定当前状态 [(ngModel)] .

预期产出:

如果当前状态为 inprogress 然后禁用 open 选项

StackBlitz Example

2 回复 | 直到 5 年前

1

17

G. Tranter 5 年前

该示例无法正常工作,因为 selected 与…有关 [value]="topping.id" ,但逻辑使用 selected.id 它不存在,除非在启动时,因为您正在初始化 挑选出来的 用一个顶端的物体。

还有逻辑 [disabled]="topping.id < selected.id" 可能有缺陷,因为它也会禁用 inprogress 什么时候 close 被选中-你可能会想要-我不确定-但你只说你想禁用 open 什么时候 进展中 被选中。

要么使用 [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: 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中已删除了这一支持。

2

Mehdi Fracso 5 年前

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

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

3

1

Divek John 5 年前

我是用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) })
)}

4

0

Kishan 7 年前

您可以在mat select中禁用选项,方法如下:

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