web-dev-qa-db-fra.com

Angular Material 7 Multi Select - Définit la valeur sélectionnée

J'essaie de définir la valeur sélectionnée pour la liste déroulante de sélection multiple comme ci-dessous

// boucle pour faire plusieurs cases à cocher comme sélectionné et réglage en fonction de la condition

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

cela ne reflète que le changement cosmétiquement car lorsque j'essaie de récupérer toutes les cases sélectionnées via (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>

où l'événement ne semble pas récupérer les valeurs que nous avons essayé de définir plus tôt, veuillez me faire savoir comment l'événement sélectionne les valeurs sélectionnées en cas de sélection de tapis.

P.S: l'objectif est de conserver les cases de sélection multiple lors du basculement entre les onglets angular

angularangular-materialangular-uiangular-material2
2
saran

Vous pouvez définir les valeurs sélectionnées avec la fonction 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);
  }

Veuillez examiner exemple

2
ahmeticat

voir cet exemple stackblitz .

vous pouvez définir et obtenir de la valeur avec l'attribut formControl.

1
amir110

Voici un bon lien exemple

0
Chanaka Weerasinghe