如何获取从组件中的Angular材料mat selection list中选择的所有值的列表 . 给出的示例显示了要在模板中显示但不在组件中显示的值 . 我正在尝试修改this question中给出的解决方案,但它不适用于我 . 这是我目前的代码:
模板:
<mat-selection-list #selected [(ngModel)]="readingTypesSelected" (ngModelChange)="onSelection($event)" >
<mat-list-option *ngFor="let readingType of readingTypes">
{{readingType.name}}
</mat-list-option>
</mat-selection-list>
零件:
onSelection(e, v) {
console.log(e);
console.log(v);
}
以下是登录到控制台:
如何从中提取所选选项的实际值?
Solution :
前两行模板代码应该是(在接受的解决方案中的stackblitz链接中给出):
<mat-selection-list #selected (selectionChange)="onSelection($event, selected.selectedOptions.selected)" >
<mat-list-option *ngFor="let readingType of readingTypes" [value] ="readingType">
2 回答
我在这里更新了你的stackblitz代码https://angular-selection.stackblitz.io
现在,您可以在控制台中获取选定的值 .
试试这个
绑定
[(ngModel)]="selectedOptions"
后,您可以在组件中使用selectedOptions
变量,该变量将包含所有选定的项目 .示例:https://stackblitz.com/edit/angular-hdmfwi