0

A través de este ejemplo que encontré en internet, quiero almacenar en un array los elementos seleccionados de un Selection lists en Angular Material

Componente.html

        <mat-card>
      <mat-card-content>
          <mat-selection-list #shoes>
              <mat-list-option *ngFor="let shoe of typesOfShoes" [(selected)]="shoe.checked">
                {{shoe.title}}
              </mat-list-option>
            </mat-selection-list>
            <p>
              Options : {{ shoes.selectedOptions.selected.value}}
            </p>

           <pre>{{this.result | json}}</pre>

      </mat-card-content>
    </mat-card>

No logro llenar el arrar con las selecciones que hago manualmente dejo link del proyecto componente.ts

    import { Component, OnInit } from '@angular/core';
    @Component({
      selector: 'list-selection-example',
      styleUrls: ['list-selection-example.css'],
      templateUrl: 'list-selection-example.html',
    })
    export class ListSelectionExample implements OnInit {
      typesOfShoes: any[];
      ngOnInit() {
        this.typesOfShoes = [
          {
            id: 1,
            title: 'Aaa',
            checked: true,
          },
          {
            id: 2,
            title: 'Bbb',
            checked: false,
          },
          {
            id: 3,
            title: 'Ccc',
            checked: true,
          },
          {
            id: 4,
            title: 'Ddd',
            checked: false,
          },
        ];
      }

      get result() {
        return this.typesOfShoes.filter(item => item.checked);
      }
    }

Tambien a través de esta opcion imprimirlos directamente desde el html

Dejo imagen de codigo

1 respuesta 1

1

Agrega un ngModel y un evento ngModelChange [(ngModel)]="selectedOptions" en el mat-selection-list

https://stackblitz.com/edit/angular-material-list-option-checked-koel6w?file=app/list-selection-example.ts

1
  • El ngModelChange no es necesario.
    – Nery Ortez
    Commented el 22 ago. 2019 a las 22:49

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.