web-dev-qa-db-fra.com

Obtention de la liste des valeurs sélectionnées de Angular 6 mat-selection-list

Comment obtenir la liste de toutes les valeurs sélectionnées dans Angular material mat selection list dans le composant. L'exemple donné montre les valeurs à afficher dans le modèle mais pas dans J'essaie de modifier la solution donnée dans cette question mais ça ne marche pas pour moi. Voici mon code actuel:

Modèle:

<mat-selection-list #selected [(ngModel)]="readingTypesSelected" (ngModelChange)="onSelection($event)" >
  <mat-list-option *ngFor="let readingType of readingTypes">
    {{readingType.name}}
  </mat-list-option>
</mat-selection-list>

Composant:

    onSelection(e, v) {

    console.log(e);
    console.log(v);    
  }

Ce qui suit est connecté à la console:

enter image description here

Comment puis-je en extraire les valeurs réelles des options sélectionnées?

Solution :

Les deux premières lignes du code du modèle doivent être (comme indiqué dans le lien stackblitz dans la solution acceptée):

<mat-selection-list #selected (selectionChange)="onSelection($event, selected.selectedOptions.selected)" >
      <mat-list-option *ngFor="let readingType of readingTypes" [value] ="readingType">
angularangular-materialangular-material-6
5
Abhay Kumar

J'ai mis à jour votre code stackblitz ici https://angular-selection.stackblitz.io

Vous pouvez maintenant obtenir les valeurs sélectionnées dans la console.

1
Chintan Kukadiya

Essaye ça

<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
    <mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe">
      {{shoe}}
    </mat-list-option>
</mat-selection-list>

Après avoir lié [(ngModel)]="selectedOptions" vous pouvez utiliser la variable selectedOptions dans votre composant qui aura tous les éléments sélectionnés.

Exemple: https://stackblitz.com/edit/angular-hdmfwi

2
Chellappan வ