Soy principiante en Angular/Angular Material y tengo el siguiente problema. Tengo una plantilla con una lista de selección con selección única y algunas opciones:
<mat-selection-list [multiple]="false"> <mat-list-option>Option 1</mat-list-option> <mat-list-option>Option 2</mat-list-option> <mat-list-option>Option 3</mat-list-option> </mat-selection-list> El comportamiento normal de esa lista es que se selecciona una opción cuando se hace clic en ella, y solo se puede seleccionar una opción a la vez. Sin embargo, me gustaría agregar el comportamiento de que la opción esté "no seleccionada" cuando vuelva a hacer clic en ella (como se presenta en los documentos ). He jugado con MatSelectionList , MatSelectionListChange y @ViewChild() , tratando de emular las soluciones propuestas aquí y aquí , pero hasta ahora fue en vano. Mi pregunta es entonces si es factible para estos componentes. (Y cualquier solución sería muy bienvenida, por supuesto :)) ¿O no vale la pena intentar cambiar el comportamiento de los componentes, y tal vez empezar de cero, o intentar arrancar? ¡Muchas gracias!
Como puede ver en el documento de material angular ( https://material.angular.io/components/list/api ), mat-list-option tiene la propiedad seleccionada.
Así que podrías jugar con él. Cuando se hace clic en una opción (puede agregar un evento en cada opción para capturar el evento), entonces cambia la propiedad seleccionada.
Ex :
const options = [{ label: 'Option 1', selected: false }, { label: 'Option 2', selected: false } ] optionWasClicked(optionClicked) { this.options.forEach((option) => option.selected = (optionClicked == option) ? true : false) } <mat-selection-list *ngFor="let option of options" [multiple]="false"> <mat-list-option (click)="optionWasClicked(option)">{{ option.label }}</mat-list-option> </mat-selection-list>