使用Angular Material2 mat-selection-list ,能够识别当前选项是选中还是未选中[布尔]。
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 以及点击的多种组合,对我来说没有任何作用。
https://stackblitz.com/edit/angular-eyjdfp-qgjhvd?file=app%2Flist-selection-example.ts
答案 0 :(得分:14)
您可以通过获取所选内容e.option.value
的{{1}}来获取当前所选值
<强> component.ts 强>
$event
<强> component.html 强>
current_selected: string;
onSelection(e, v){
this.current_selected = e.option.value;
}
奖金
您可以通过调用模板中<p>
Current selected value: {{ current_selected }}
</p>
选择的属性列出所有选定项目。
<强> component.html 强>
shoes.selectedOptions.selected
<强> Working Demo 强>
答案 1 :(得分:2)
在最近的 Angular 版本中,您应该使用 options
:
在您的模板中:
<mat-selection-list [multiple]="false" (selectionChange)="selChange($event)">
在你的课堂上:
public selChange(e: MatSelectionListChange) {
let selection = e.options[0].value;
}
答案 2 :(得分:1)
在您的组件中 .ts:
export class ListSelectionExample {
typesOfShoes = ['Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'];
selectedShoes;
onSelection(e, v){
this.selectedShoes = v.selected.map(item => item.value);
console.error(e.option.selected,v);
}
}
答案 3 :(得分:1)
在click
上使用mat-list-option
事件绑定:
<mat-selection-list #shoes (selectionChange)="onSelection($event, shoes.selectedOptions)" >
<mat-list-option *ngFor="let shoe of typesOfShoes" [value]='shoe' (click)="getValue($event)">
{{shoe}}
</mat-list-option>
</mat-selection-list>
Component TypeScript:
getValue(event){
console.log(event.target.parentNode.innerText);
}
答案 4 :(得分:1)
我花了很多时间来寻找解决方案,但是一切都是徒劳的... 幸运的是,我想出了一个主意,希望对您有所帮助。
---- checkListItems是包含我要发布的所有项目的数组----
<mat-selection-list #checkItems (selectionChange)="onSelection($event, checkItems.selectedOptions.selected)">
<mat-list-option *ngFor="let check of checklistItems">
{{check.label}}
</mat-list-option>
</mat-selection-list>
在垫选择列表中,我发送一个事件和所有选定项目的值,因此,我所说的这个值实际上是一个数组MatSelectionList。而且我必须在.ts文件中解析所选项目的值。
selectedOptions = [];
checkedValues = [];
onSelection(event, value) {
this.checkedValues = [];
this.selectedOptions = value;
for (let i = 0; i < this.selectedOptions.length; i++) {
this.checkedValues.push(this.selectedOptions[i]._text.nativeElement.innerText);
}
}
因此,我有一个名为checkedValues的数组,每次选择或取消选择时都会删除该数组,因为MatSelectionList数组(在本例中为我的 value 数组)将包含所有项被选中。因此,如果您不会每次都删除它,它将在每次选择时继续添加相同的项目。 (您可以通过删除 this.checkedValues = [] 行并在for循环完成后打印出checkedValues数组来进行尝试。)
希望这会有所帮助!
答案 5 :(得分:0)
<mat-selection-list class="addressList" #userAddressList>
<mat-list-option *ngFor="let userAddress of userAddressesArray"
(click)="onAddressSelection(userAddress)">
{{userAddress}}
</mat-list-option>
</mat-selection-list>
In TypeScript
private onAddressSelection(selectedItem:any) {
let selectedOption = selectedItem;
}