web-dev-qa-db-ja.com

Angular Material 7 Multi Select-選択した値を設定

以下のように複数選択ドロップダウンの選択した値を設定しようとしています

//条件に基づいて選択および設定として複数のチェックボックスを作成するためのループ

document.getElementsByTagName('mat-pseudo-checkbox')[index].classList.add('mat-pseudo-checkbox-checked');
document.getElementsByTagName('mat-pseudo-checkbox')[index].setAttribute("ng-reflect-state","checked");

（selectionChange）= filter（$ event）を介して選択されたすべてのチェックボックスを取得しようとすると、これは表面的な変更のみを反映します

<mat-select multiple  (selectionChange)="filter($event)" formControlName="dropdown">
   <mat-option *ngFor="let info of infos" [value]="info">
      {{info}}
    </mat-option>
 </mat-select>

イベントが以前に設定しようとした値を取得しないように見える場合、マット選択の場合にイベントが選択された値を取得する方法を知らせます。

PS：angular tabsの間で切り替えたときに複数の選択ボックスを保持することが目標です

angularangular-materialangular-uiangular-material2
2
saran

FormControl.setValue()関数で選択した値を設定できます

example.component.html

<mat-select [formControl]="toppings" (selectionChange)="filter($event)" multiple [(value)]="selected" >
    <mat-option *ngFor="let topping of toppingList" [value]="topping">{{topping}}</mat-option>
</mat-select>

example.component.ts

  toppings = new FormControl();
  toppingList: string[] = ['Extra cheese', 'Mushroom', 'Onion', 'Pepperoni', 'Sausage', 'Tomato'];

  ngOnInit(){
    this.toppings.setValue(['Mushroom', 'Onion']);
  }


  filter(data){
    console.log(data.value);
  }

調べてみてください 例

2
ahmeticat

これを見る stackblitz サンプル。

formControl属性を使用して値を設定および取得できます。

1
amir110

これは良いリンクです 例

0
Chanaka Weerasinghe