Literalmente estoy buscando la solución a este problema durante dos días y no puedo encontrar nada... Básicamente, lo que quiero es obtener opciones seleccionadas de mi elemento <select> :
<select name="selectedCars" [ngModel]="selectedCars" multiple> <option *ngFor="let car of cars" [ngValue]="car">{{car.Model}}</option> </select> Pensé que se uniría a selectedCars: Car[] y podría hacer algo como esto para mostrar los valores seleccionados:
<h2>Selected:</h2> <ul> <li *ngFor="let selectedCar of selectedCars">{{selectedCar.Model}}</li> </ul>Literalmente no hay nada en la documentación sobre esto.
Cambie [ngModel] a [(ngModel)] (enlace bidireccional) que actualizará la matriz de autos selectedCars tan pronto como seleccione / anule la selección y la opción en el menú desplegable.
<select name="selectedCars" [(ngModel)]="selectedCars" multiple> <option *ngFor="let car of cars" [ngValue]="car">{{car.Model}}</option> </select> De lo contrario, agregue el siguiente atributo a su elemento de selección que se muestra a continuación, es lo mismo que hacer [(ngModel)] .
(ngModelChange)="selectedCars=$event"Deberías usar [(ngModel)]
<select name="selectedCars" [(ngModel)]="selectedCars" multiple> <option *ngFor="let car of cars" (click)="clickedOption()" [ngValue]="car"> {{car.name}}</option> </select> clickedOption(){ console.log(this.selectedCars) }Simplemente puede registrar los elementos cada vez que se haga clic en una opción como se muestra en el método anterior