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

Question

如何获取从 Angular Material 中选择的所有值的列表 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);    
  }

以下内容被记录到控制台:

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

解决方案:

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

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

Answer 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>

绑定(bind) [(ngModel)]="selectedOptions" 后，您可以在组件中使用 selectedOptions 变量，它将包含所有选定的项目。

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