Saltar al contenido

Preseleccionar múltiples valores para mat-select – Angular 6

Te doy la bienvenida a nuestro sitio web, en este lugar vas a hallar la resolución a lo que andabas buscando.

Solución:

Con Angular6+ hay una advertencia de obsolescencia cuando tiene un formControl y [(ngModel)]

Parece que está usando ngModel en el mismo campo de formulario que formControl. La compatibilidad con el uso de la propiedad de entrada ngModel y el evento ngModelChange con directivas de formulario reactivo quedó obsoleta en Angular v6 y se eliminará en Angular v7.

Opción 1 usando [ngModel] sin FormControl

Como sugiere la primera respuesta, dividir [ngModel] y (ngModelChange) así.


  
      food.viewValue
  

Y para los ts.

  allfoods: Food[] = [
    value: 'steak-0', viewValue: 'Steak',
    value: 'pizza-1', viewValue: 'Pizza',
    value: 'tacos-2', viewValue: 'Tacos',
    value: 'pasta-3', viewValue: 'Pasta'
  ];
  selectedFoods = [
     'steak-0', 'pasta-3'
  ];

https://stackblitz.com/edit/angular-mat-select-with-ngmodel?embed=1&file=app/select-overview-example.ts

Opción 2 usando [formControl] sin [ngModel]


    
        
            food.viewValue
        
    

En este caso, la selección se inicializa en el constructor de FormControl.

 allfoods: Food[] = [
    value: 'steak-0', viewValue: 'Steak',
    value: 'pizza-1', viewValue: 'Pizza',
    value: 'tacos-2', viewValue: 'Tacos',
    value: 'pasta-3', viewValue: 'Pasta'
    ];
 myselectedFoods = ['pasta-3', 'steak-0'];
 foodForm: FormControl = new FormControl(this.myselectedFoods);

Creo que la forma más fácil es usar [(ngModel)] directiva (o un enlace unidireccional, lo cubriré poco después) para manipular el valor de mat-select: puede vincular una variable, que contiene elementos que desea preseleccionar, algo como esto:


  participant

Y luego puedes filtrar tu inicial array de elementos y obtenga solo aquellos que desea seleccionar de forma predeterminada (debe almacenarse en selection propiedad de clase en caso previsto).

he creado un Apilar para demostrar, que es posible. En este ejemplo, filtro elementos en índices pares y finalmente obtenemos “1, 3, 5, …” elementos seleccionados.

Tenga en cuenta que puede dividir [(ngModel)] en 2 directivas separadas si desea usar solo un enlace unidireccional: [ngModel] o (ngModelChange). Para obtener más información, consulte la guía de sintaxis de plantillas angulares.

Si te animas, tienes la libertad de dejar una noticia acerca de qué le añadirías a este enunciado.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 3.5)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *