きなこもち.net

.NET Framework × UiPath,Orchestrator × Azure × AWS × SIer

Angular Material × List(mat-selection-list) × 選択された値をtypescript側で取得する

この記事の目的

この記事は、
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