从 Angular 6 mat-selection-list 获取选定值列表答案

【问题标题】：Getting list of selected values from Angular 6 mat-selection-list从 Angular 6 mat-selection-list 获取选定值列表
【发布时间】：2018-09-12 05:54:45
【问题描述】：

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

以下内容正在记录到控制台：

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

解决方案：

模板代码的前两行应该是（在接受的解决方案中的 stackblitz 链接中给出）：

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

【问题讨论】：

你有什么错误吗？
我得到一个以 MatListOption 作为值的数组。不知道如何提取实际值。
您提到的解决方案也适用于 Angular 8，Materials 8。谢谢

标签： angular angular-material angular-material-6

【解决方案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

【讨论】：

这不起作用。请注意，这是针对 Angular 6 的。我已经用我的代码编辑了这个问题。请检查。
工作在角度 11

【解决方案2】：

在您的代码中缺少值属性

替换

与

然后在 readingTypesSelected 中获取选中的数组，

[(ngModel)]="readingTypesSelected" 中提到了readingTypesSelected

【讨论】：

【解决方案3】：

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

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

【讨论】：

我无法从 stackblitz 获取代码。可以把代码贴在这里吗？
这可能是他的 stackblitz - stackblitz.com/edit/angular-selection
和这个stackblitz.com/edit/angular-get-selected-items的可能副本

【解决方案4】：

<mat-selection-list #products [(ngModel)]="selectedProducts">
    <mat-list-option *ngFor="let eachProduct of allProducts;" [value]="eachProduct">
        {{eachProduct.name}}
    </mat-list-option>
</mat-selection-list>

{{selectedProducts|json}}

在 Angular 10 中测试。主要部分是 [value]="eachProduct" 否则它将显示 null

【讨论】：

【解决方案5】：

这个方案更好

selectionChanged(event: MatSelectionListChange): void {
    this.selected = event.options.filter(o => o.selected).map(o => o.value);
}

【讨论】：