web-dev-qa-db-fra.com

Valeur actuellement sélectionnée dans la liste de sélection de mat de matériau angulaire6

Travailler avec Angular Material2 mat-selection-list , Capable d'identifier si l'option actuelle est sélectionnée ou non [ Boolean].

compnenent.html 

<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
  <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe'>
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

component.ts 

export class ListSelectionExample {
  typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

  onSelection(e, v){
   console.error(e.option.selected,v); 
  }
}

e.option.selected indique si l'option actuelle est sélectionnée ou non.

Comment identifier la valeur actuellement sélectionnée? Essayé avec plusieurs combinaisons avec ngModel et ngModelChange et clic , rien ne fonctionne pour moi.

https://stackblitz.com/edit/angular-eyjdfp-qgjhvd?file=app%2Flist-selection-example.ts

angularangular-materialangular-material2angular6
5
Anil Kumar Arya

Vous pouvez obtenir la valeur actuellement sélectionnée en obtenant e.option.value de votre sélectionChanger $event

component.ts 

current_selected: string;

onSelection(e, v){
   this.current_selected = e.option.value;
}

component.html 

<p>
  Current selected value: {{ current_selected }}
</p>

Bonus

Vous pouvez répertorier tous les éléments sélectionnés en appelant la propriété sélectionnée parmi shoes.selectedOptions.selected dans le modèle.

component.html 

<p>Selected:</p>
<ul>
  <li *ngFor="let i of shoes.selectedOptions.selected">
    {{ i.value }}
  </li>
</ul>

Démo de travail

14
Roel

Utilisez la liaison d'événement click sur le mat-list-option:

<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
      <mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe' (click)="getValue($event)">
        {{shoe}}
      </mat-list-option>
</mat-selection-list>

Composant TypeScript:

getValue(event){
    console.log(event.target.parentNode.innerText);
}
5
Prachi
 <mat-selection-list class="addressList" #userAddressList>
          <mat-list-option *ngFor="let userAddress of userAddressesArray"
          (click)="onAddressSelection(userAddress)">
                  {{userAddress}}
                </mat-list-option>
              </mat-selection-list>
In TypeScript


  private onAddressSelection(selectedItem:any) {
   let  selectedOption = selectedItem;


  }
2
Madan Dale

J'ai passé beaucoup de temps à trouver une solution à cela, mais tout en vain ... Heureusement, j'ai trouvé une idée pour cela, j'espère que cela aide.

---- checkListItems est le tableau qui comprend tous les éléments que je souhaite publier ----

component.html

<mat-selection-list #checkItems (selectionChange)="onSelection($event, checkItems.selectedOptions.selected)">
  <mat-list-option *ngFor="let check of checklistItems">
    {{check.label}}
  </mat-list-option>
</mat-selection-list>

Dans mat-selection-list, j'envoie un événement et le valeur de tous les éléments sélectionnés, donc ce valeur dont je parle est en fait un tableau de MatSelectionList. Et je dois analyser la valeur de l'élément sélectionné dans mon fichier .ts.

component.ts

selectedOptions = [];
checkedValues = [];

onSelection(event, value) {
    this.checkedValues = [];
    this.selectedOptions = value;
    for (let i = 0; i < this.selectedOptions.length; i++) {
      this.checkedValues.Push(this.selectedOptions[i]._text.nativeElement.innerText);
    }
}

Donc, j'ai un tableau appelé checkValues, que je supprime chaque fois qu'une sélection ou une désélection est effectuée, car le tableau MatSelectionList (dans ce cas, mon valeur tableau) sera composé de tous les éléments qui sont sélectionnés . Donc, si vous ne le supprimez pas à chaque fois, il continuera à ajouter le même élément chaque fois qu'il est sélectionné. (Vous pouvez essayer cela en supprimant la ligne this.checkedValues ​​= [] et en imprimant le tableau checkedValues ​​une fois la boucle for terminée).

J'espère que cela t'aides!!

1
Shubham Arya

Dans votre composant .ts:

export class ListSelectionExample {
 typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];

 selectedShoes;

 onSelection(e, v){
   this.selectedShoes = v.selected.map(item => item.value);

  console.error(e.option.selected,v); 
 }
}
1
Bhanu Tej P