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

Question

我正在尝试访问材质 mat-selection-list 组件（版本 7）的选定选项。我找到了 selectedOptions here 的文档。

我整理了一些似乎可以让我访问所需数据的 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

首先将value 用于字符串或ngValue 用于您的选项。

<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 进行双向数据绑定。

<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

好吧，恕我直言，正确的方法似乎是使用MatSelectionList 的selectedOptions 属性。

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：与其他答案不同，我更喜欢保持模板尽可能干净。

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