angular - 如何访问 Material 垫选择列表中的选择选项

Question

我正在尝试访问 Material 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>

以及对应的 typescript 文件(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 和 Material 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如果您只想访问所选数据但不需要通知更改，则用于 2 路数据绑定(bind)。

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