この記事の目的
この記事は、
Angular MaterialのList(mat-selection-list)で選択された値を、コードビハインド？（typescript側）で取得して処理を行う実装方法のメモ
を目的としています。
本題
List化するモデルの定義
typesOfShoes: DialogData[] = [
{
name: "Boots",
age: 20
},
{
name: "Clogs",
age: 23
}
];
mat-selection-list定義
<mat-selection-list #shoes> <mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe"> {{shoe.age}} - {{shoe.name}} </mat-list-option> </mat-selection-list> <>
コードビハインドの呼び出しのためのボタンの定義
なんでもよいのですが、コードビハインドの処理を起動するためのトリガーとなるものを用意します。ここでは、Button Clickを用意します。
<button mat-button (click)="selectedTest(shoes.selectedOptions.selected)">text</button>
ボタンから実行されるイベントの定義
//何が何でも値を取得する
selectedTest(params: any) {
//選択されたリストをループしてValueを取得する
params.forEach(param=> {
//インテリセンスがあったほうがいいからキャストする。
let value = param.value as DialogData;
//値が取れているか確認する
console.info(value.name + ':' + value.age);
});
}
忘備録メモ
shoes.selectedOptions.selectedで渡されるオブジェクトは、 MatListOption[]型になっているので、この中から値を取得する必要があるらしいです。MatListOptionの中身は、こんな感じになっているので、この中からvalueプロパティに入っている”選択された項目”を取得しました。
このvalueに入っているは、mat-list-optionの[Value]属性で指定したものです。そういう構造なんだなって感じです。
checkboxPosition: "after"
selectionList: MatSelectionList {_disableRipple: false, _element: ElementRef, selectionChange: EventEmitter, tabIndex: 0, color: "accent", …}
_avatar: undefined
_changeDetector: ViewRef_ {_view: {…}, _viewContainerRef: null, _appRef: null}
_disableRipple: false
_disabled: false
_element: ElementRef {nativeElement: mat-list-option.mat-list-item.mat-list-option.ng-star-inserted}
_hasFocus: false
_icon: undefined
_lines: QueryList {dirty: false, _results: Array(0), changes: EventEmitter, length: 0, last: undefined, …}
_selected: true
_text: ElementRef {nativeElement: div.mat-list-text}
_value: {name: "Boots", age: 11}
color: (...)
disableRipple: (...)
disabled: (...)
selected: (...)
value: (...)
__proto__: Object
