![](/img/trans.png)
[英]Remove selected items from Angular Material mat-selection-list
[英]Current selected value in angular6 material mat-selection-list
使用 Angular Material2 mat-selection-list ,能够识别当前选项是选中还是未选中[Boolean]。
组件.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>
组件.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
您可以通过获取 selectionChange $event
e.option.value
来获取当前选定的值
组件.ts
current_selected: string;
onSelection(e, v){
this.current_selected = e.option.value;
}
组件.html
<p>
Current selected value: {{ current_selected }}
</p>
奖金
您可以通过在模板中调用shoes.selectedOptions.selected
属性 selected 来列出所有选定的项目。
组件.html
<p>Selected:</p>
<ul>
<li *ngFor="let i of shoes.selectedOptions.selected">
{{ i.value }}
</li>
</ul>
在mat-list-option
上使用click
事件绑定:
<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>
组件打字稿:
getValue(event){
console.log(event.target.parentNode.innerText);
}
<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;
}
在最近的 Angular 版本中,您应该使用options
:
在您的模板中:
<mat-selection-list [multiple]="false" (selectionChange)="selChange($event)">
在你的课堂上:
public selChange(e: MatSelectionListChange) {
let selection = e.options[0].value;
}
在您的组件 .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);
}
}
我花了很多时间为此寻找解决方案,但一切都是徒劳的......幸运的是我已经想出了一个想法,希望它有所帮助。
----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 数组(在本例中为我的值数组)将包含所有被选中的项目。 所以如果你不每次都删除它,它会在每次选择时继续附加相同的项目。 (您可以通过删除此行this.checkedValues=[]并在 for 循环完成后打印 checkedValues 数组来尝试此操作)。
希望这可以帮助!!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.