如何访问材料垫选择列表中的选择选项

Question

我正在尝试访问材质垫选择列表组件（版本 7）的选定选项。我在这里找到了 selectedOptions 的文档。

我已经拼凑了一些 html/ts 行，这些行似乎让我可以访问所需的数据。但是，我认为这不是正确的方法。但是，我无法使用“著名的搜索引擎”找到建议。

我有以下 HTML (pizza.component.html)

<h1>Pizzas</h1>
<mat-selection-list #pizzaList (selectionChange)="onPizzasChange($event)">
    <mat-list-option *ngFor="let pizza of pizzas">
        {{pizza}}
    </mat-list-option>
</mat-selection-list>

以及相应的打字稿文件（pizza.component.ts）

import { MatButtonModule } from '@angular/material/button';
import { Component, OnInit } from '@angular/core';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { Pizza } from '../pizza';

@Component({
    selector: 'app-pizza-view',
    templateUrl: './pizza-view.component.html',
    styleUrls: ['./pizza-view.component.css']
})

export class PizzaViewComponent implements OnInit {

    pizzas: any;

    constructor( ) { }

    ngOnInit() {
        pizzas = [ 'Margherita', 'Funghi', 'Quattro Stagioni', 'Calzone' ];
    }

    onPizzasChange(event) {
        console.log("selectedOptions:", event.option.selectionList.selectedOptions._selection;
    };

}

问题是：我该如何正确地做到这一点？

PS：我正在使用@angular/core 7.0.0 和材料 7.0.1

Answer 1

首先在您的选项中添加一个valuefor 字符串或ngValuefor 对象。

<mat-list-option *ngFor="let pizza of pizzas" [value]="pizza"> or [ngValue]="pizza"

选项 1：使用 selectionChange

将选定的 MatListOptions 数组传递给您的函数。

<mat-selection-list #pizzaList (selectionChange)="onGroupsChange(pizzaList.selectedOptions.selected)">
    <mat-list-option *ngFor="let pizza of pizzas" [value]="pizza">
        {{pizza}}
    </mat-list-option>
</mat-selection-list>

您将获得一个数组，其中包含按选择顺序排列的所选选项。

import { MatListOption } from '@angular/material/list'

onGroupsChange(options: MatListOption[]) {
  // map these MatListOptions to their values
  console.log(options.map(o => o.value));
}

选项 2：使用 ngModel

正如@Eliseo 评论ngModel的那样，如果您只想访问选定的数据但不需要收到有关更改的通知，则可以将其用于 2 路数据绑定。

<mat-selection-list #pizzaList [(ngModel)]="selectedPizzas">
    <mat-list-option *ngFor="let pizza of pizzas" [value]="pizza">
        {{pizza}}
    </mat-list-option>
</mat-selection-list>

selectedPizzas: string[]; // this array will contain the selected pizzas

要另外获得有关更改的通知，您可以添加ngModelChange：

<mat-selection-list #pizzaList [(ngModel)]="selectedPizzas" (ngModelChange)="onGroupsChange($event)">

您将获得一个数组，其中包含所选选项的值，这些值按照它们在输入数组中出现的顺序pizzas（而不是它们被选择的顺序selectionChange）。

onGroupsChange(selectedPizzas: string[]) {
  console.log(selectedPizzas);
}

Answer 2

那么，恕我直言，以正确的方式似乎是使用selectedOptions的财产 MatSelectionList。

selectedOptions: SelectionModel<MatListOption>

在您的示例中，您正在访问私有财产。
您可以查看来源SelectionModel以查看您可以使用的内容。

正确的方法似乎是

/** Selected values. */
get selected(): T[] {
  if (!this._selected) {
    this._selected = Array.from(this._selection.values());
  }

  return this._selected;
}

事件类型为MatSelectionListChange，因此：

onPizzasChange(event: MatSelectionListChange) {
    console.log("selectedOptions:", event.source.selectedOptions.selected();
};

PS：与其他答案不同，我更喜欢保持模板尽可能干净。

所有属性访问都可以在组件内部完成。这也更容易阅读和理解。