angular - 从 Angular 6 mat-selection-list 获取选定值的列表
问题描述
如何获取从组件中的 Angular 材料垫选择列表中选择的所有值的列表。给出的示例显示了要在模板中显示但不在组件中显示的值。我正在尝试修改此问题中给出的解决方案,但它对我不起作用。这是我当前的代码:
模板:
<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);
}
以下内容被记录到控制台:
我如何从中提取所选选项的实际值?
解决方案:
模板代码的前两行应该是(如已接受解决方案中的 stackblitz 链接中给出的那样):
<mat-selection-list #selected (selectionChange)="onSelection($event, selected.selectedOptions.selected)" >
<mat-list-option *ngFor="let readingType of readingTypes" [value] ="readingType">
解决方案
尝试这个
<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
<mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe">
{{shoe}}
</mat-list-option>
</mat-selection-list>
绑定后[(ngModel)]="selectedOptions"
,您可以在组件中使用selectedOptions
变量,该变量将包含所有选定的项目。
推荐阅读
- javascript - 反应 onClick 多个处理函数问题
- angular - 如何显示 SearchFilter 文本框,即使 Angular Multiselect Dropdown 中没有加载数据
- php - 邮件没有从我的 laravel 项目发送
- listview - 我想申请 Flutter ListView
- dashboard - Cognos Analytics - 连接到数据库
- docker - Docker-compose 挂载文件夹
- ios - APNS 推送通知后台不再工作
- django - 如何使用 jena-fuseki 对 django 应用程序进行单元测试?
- flutter - Flutter:我可以在哪里添加 Text()
- css - CSS 背景图像线性渐变在 Chrome 中显示不需要的边框