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

Question

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

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>

绑定后

[(ngModel)]="selectedOptions"

您可以在组件中使用

selectedOptions

变量，该变量将包含所有选定的项目。

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

Answer 2

这个解决方案更好

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

Answer 3

<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

Answer 4

您的代码中缺少值属性

更换：

<mat-list-option *ngFor="let readingType of readingTypes">

与：

<mat-list-option *ngFor="let readingType of readingTypes" [value]="readingType">

然后获取

readingTypesSelected

中选择的数组，

readingTypesSelected

中提到了

[(ngModel)]="readingTypesSelected"

Answer 5

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

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

Answer 6

html

<mat-selection-list 
  #selectionList
  (selectionChange)="listSelectionChange($event)"
>
   <mat-list-option *ngFor="let shoe of typesOfShoes" [value]="shoe">
    {{shoe}}
   </mat-list-option>
</mat-selection-list>    

ts

listSelectionChange(e: MatSelectionListChange) {
  console.log(e.source.selectedOptions.selected.map((o: MatListOption) => o.value));
}

享受！