angular - angular6 Material 垫选择列表中的当前选定值

Question

使用 Angular Material2 ma​​t-selection-list，能够识别当前选项是被选中还是未被选中[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 通知当前选项是选中还是未选中。

如何识别当前选择的值？尝试与 ngModel 和 ngModelChange 和 click 进行多种组合，但对我没有任何作用。

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

Answer 1

您可以通过获取 selectionChange $event 的 e.option.value 来获取当前选择的值

component.ts

current_selected: string;

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

component.html

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

奖金

您可以通过在模板中调用shoes.selectedOptions.selected 的属性selected 来列出所有选中的项目。

component.html

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

Working Demo