angular6材质垫选择列表中的当前选择值 [英] Current selected value in angular6 material mat-selection-list

问题描述

使用Angular Material2 mat-selection-list ，能够识别当前选项是选中还是未选中[Boolean].

Working with Angular Material2 mat-selection-list, Able to identify whether current option is selected or non-selected[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通知当前选项是选中还是未选中.

e.option.selected notifies whether current option is selected or non-selected.

如何识别当前选择的值?尝试使用 ngModel和ngModelChange 和 click 的多种组合，对我没有任何帮助.

How to identify current selected value ? Tried with multiple combinations with ngModel and ngModelChange and click , nothing works for me.

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

推荐答案

您可以通过选择内容的e.option.value更改$event

You can get current selected value by getting e.option.value of your selectionChange $event

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的选定属性来列出所有选定的项目.

You can list all selected items by calling property selected of shoes.selectedOptions.selected in the template.

component.html

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

工作演示

Working Demo

这篇关于angular6材质垫选择列表中的当前选择值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！