web-dev-qa-db-ja.com

Angular 6 mat-selection-listから選択した値のリストを取得する

コンポーネントのAngular material mat selection list から選択されたすべての値のリストを取得するにはどうすればよいですか。コンポーネント。 この質問 で指定されたソリューションを変更しようとしていますが、うまくいきません。現在のコードは次のとおりです。

テンプレート：

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

成分：

    onSelection(e, v) {

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

以下はコンソールに記録されています：

enter image description here

これから選択したオプションの実際の値を抽出するにはどうすればよいですか？

ソリューション：

テンプレートコードの最初の2行は（受け入れられたソリューションのstackblitzリンクで与えられているように）あるべきです：

<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

ここでstackblitzコードを更新しました https://angular-selection.stackblitz.io

これで、選択した値をコンソールで取得できます。

1
Chintan Kukadiya

これを試して

_<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>
_

[(ngModel)]="selectedOptions"をバインドした後、コンポーネントでselectedOptions変数を使用して、すべての選択されたアイテムを取得できます。

例： https://stackblitz.com/edit/angular-hdmfwi

2
Chellappan வ