item - mat-table angular

Encuadernación de una lista de selección de material angular

Question

Estoy creando una barra de herramientas con una lista de selección (casillas de verificación con cada elemento de la lista) usando Angular Material 2. Simplemente no puedo averiguar cómo configurar las casillas de verificación antes de que se muestre la lista y luego obtener los elementos seleccionados luego de la interacción del usuario.

Estoy intentando el control dentro de un Formulario pensando que podría necesitar esto para enlazar con ngModel, pero esto no parece ayudar. Mi html hasta ahora es:

<form
  novalidate
  #areaSelectForm="ngForm">

<div>
    <mat-selection-list 
                        #areasList="ngModel"
                        [(ngModel)]="model"
                        id="areaListControl"
                        name="areaListControl"
                        (ngModelChange)="onAreaListControlChanged($event)">
        <mat-list-option *ngFor="let tta of taskTypeAreas" (click)="onCheckboxClick($event)" [value]="tta">
            {{tta}}
        </mat-list-option>
    </mat-selection-list>
</div>

</form>

Este debe ser un camino trillado, pero la documentación es difícil de interpretar y parece que no puedo encontrar ningún ejemplo adecuado.

Cualquier orientación muy bienvenida por favor.

Answer 1

A partir de la versión 5.0.0 , el material angular ahora admite ngModel para la lista de selección.

Así que el código se puede simplificar a

<mat-selection-list #list [(ngModel)]="selectedOptions" (ngModelChange)="onNgModelChange($event)">
    <mat-list-option *ngFor="let tta of taskTypeAreas" [value]="tta.name">
        {{tta.name}}
    </mat-list-option>
</mat-selection-list>

La versión también expone un evento ngModelChange para la lista de selección. Aquí está el blitz actualizado

(Respuesta original antes de Angular 5.0.0)

Parece que mat-selection-list no admite actualmente ngModel ( https://github.com/angular/material2/pull/7456 ), pero parece que será compatible en un futuro próximo. Mientras tanto, puede usar una variable de referencia #list para tomar las opciones seleccionadas.

// component.html
<mat-selection-list #list>
    <mat-list-option *ngFor="let tta of taskTypeAreas" [selected]="tta.selected" 
        (click)="onAreaListControlChanged(list)" [value]="tta.name">
        {{tta.name}}
    </mat-list-option>
</mat-selection-list>

Luego, pase la variable de referencia a su onAreaListControlChanged(list) para que pueda analizar las opciones seleccionadas.

// component.ts
onAreaListControlChanged(list){
    this.selectedOptions = list.selectedOptions.selected.map(item => item.value);
}

Para seleccionar las casillas de verificación al cargar, puede usar la propiedad [selected] de cada <mat-list-option> .

<mat-list-option ... [selected]="tta.selected" ...>

Para hacer esto, necesitarás agregar otra propiedad a tu matriz.

// component.ts
taskTypeAreas: {
    name: string;
    selected: boolean;
}[] = [
    {
        name: ''Area 1'',
        selected: false
    },
    {
        name: ''Area 2'',
        selected: false
    },
    {
        name: ''Area 3'',
        selected: true
    },
];

Esto hará que se seleccione el Area 3 en la carga. Aquí hay un stackblitz demoing esto.