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

Question

我正在尝试访问材料垫选择列表组件（版本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

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

MatSelectionList

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

正确的方法似乎是

SelectionModel

该事件的类型为/** Selected values. */ get selected(): T[] { if (!this._selected) { this._selected = Array.from(this._selection.values()); } return this._selected; } ，因此：

MatSelectionListChange

顺便说一句，有几个披萨名称是错误的：玛格丽塔（Margherita）和Quattro stagioni。

PS：与其他答案不同，我更喜欢保持模板尽可能干净。
所有属性访问都可以在组件内部完成。这也更容易阅读和理解。

Answer 2

首先为您的选项添加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'

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);
}