web-dev-qa-db-ja.com

Angular Mat-Selectで特定のオプションを動的に無効にする方法

私はnameとidのようなリストを持っています：

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

また、* ngForでMatSelectを使用して配列を反復処理し、[(ngModel)]を使用して現在のステータスをselectにバインドします。

予想される出力：

現在のステータスがinprogressの場合、openオプションを無効にします

StackBlitzの例

angularangular-material2angular-material-5
3
Prashant Pimpale

ユーザーが複数のオプションを選択できる場合でも、ngModelは必要ありません。以下は、angular material 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" 
[value]="topping.id" 
[disabled]="checkUserSelection(topping)"
</mat-option>
</mat-select>
0
Nikhil Kamani

以下のように条件を置くことにより、マット選択のオプションを無効にすることができます：

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