Как получить доступ к опциям выбора в mat-selection-list материала

Question

Я пытаюсь получить доступ к выбранным опциям компонента mat-selection-list материала (версия 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

Начните с добавления 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 для двухсторонней привязки данных, если вам нужен только доступ к выбранным данным, но вам не нужно уведомлять об изменениях.

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

Кстати, пара названий пиццы неверна: Маргарита и Quattro stagioni.

PS: в отличие от другого ответа, я предпочитаю держать шаблон как можно более чистым.
Все свойства доступа могут быть сделаны внутри компонента. Который также легче читать и понимать.