首页 文章

从Angular 6 mat-selection-list获取所选值的列表

提问于
浏览
2

如何获取从组件中的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);    
  }

以下是登录到控制台:

enter image description here

如何从中提取所选选项的实际值?

Solution

前两行模板代码应该是(在接受的解决方案中的stackblitz链接中给出):

<mat-selection-list #selected (selectionChange)="onSelection($event, selected.selectedOptions.selected)" >
      <mat-list-option *ngFor="let readingType of readingTypes" [value] ="readingType">

2 回答

  • 1

    我在这里更新了你的stackblitz代码https://angular-selection.stackblitz.io

    现在,您可以在控制台中获取选定的值 .

  • 1

    试试这个

    <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 变量,该变量将包含所有选定的项目 .

    示例:https://stackblitz.com/edit/angular-hdmfwi

相关问题