0
246
Vistasíndice de selección de grupo de radio de alfombra angular
Tengo un botón de radio en un grupo de radio de tapete que proviene de un bucle, el botón y la tarjeta deben estar coloreados según el índice seleccionado, pero como puede ver en la captura de pantalla, el botón de radio está seleccionado pero no coloreado en blanco.
El botón de radio basado en el índice seleccionado o la radio seleccionada debería ser así, pero actualmente mi lógica no funciona. Gracias por cualquier ayuda.
¿Alguna idea chicos? Gracias.
#código HTML
<p fxLayoutAlign="center" class="select-date-time-text">Select Available Date</p> <mat-radio-group> <mat-card style="cursor: pointer;" [ngClass]="selectedIndex === i ? 'selected-schedule-card' : ''" *ngFor="let item of schedules;let i = index;" fxLayoutAlign="start center" style="cursor: pointer;margin-bottom: 20px;"> <mat-radio-button color="accent" [ngClass]="selectedIndex === i ? 'selected-schedule-radio' : ''" value="i" (click)="onSelect(item , i)"> <mat-icon class="date-icon" style="margin-top:3px;margin-left:10px;">today</mat-icon> {{item.proposedDateStartString}} </mat-radio-button> </mat-card> </mat-radio-group>#tscode
onSelect(item:any , index:number) { this.selectedIndex = index; this.selectedItem = item; }#css
.selected-schedule-radio { color: #ffffff; } .selected-schedule-card { background-color: #007DFF; }2 Respuestas
Responde la pregunta0
Haga una función en el lado ts y use esto en su html: (clic) = "onSelect (elemento)"
0
No necesita un evento de change para esto. Cree una variable de alcance en su TS para mantener el valor, como
this.selectedDate=''; Coloque un enlace ngmodel en el elemento mat-radio-group .
[ngModel]="selectedDate" Eso rastreará el valor seleccionado de todo el grupo de radio. Luego haga que su ngClass compare el valor de la radio con el valor seleccionado
[ngClass]="selectedDate === item.proposedDateStartString ? 'selected-schedule-radio' : ''"Todos juntos...
<mat-radio-group [ngModel]="selectedDate"> <mat-card style="cursor: pointer;" [ngClass]="selectedIndex === i ? 'selected-schedule-card' : ''" *ngFor="let item of schedules;let i = index;" fxLayoutAlign="start center" style="cursor: pointer;margin-bottom: 20px;"> <mat-radio-button color="accent" [ngClass]="selectedDate === item.proposedDateStartString ? 'selected-schedule-radio' : ''" > <mat-icon class="date-icon" style="margin-top:3px;margin-left:10px;">today</mat-icon> {{item.proposedDateStartString}} </mat-radio-button> </mat-card> </mat-radio-group>