我在來自回圈的 mat 單選組中有一個單選按鈕，按鈕和卡片應根據所選索引著色，但正如您在螢屏截圖中看到的那樣，單選按鈕已選中但未以白色著色
基于選定索引或選定單選的單選按鈕應該是這樣的，但目前我的邏輯不起作用。謝謝你的幫助。
有什么想法嗎？謝謝。
#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;
}
uj5u.com熱心網友回復：
您不需要change為此舉辦活動。在您的 TS 中創建一個范圍變數來保存該值，例如
this.selectedDate='';
對元素進行ngmodel系結。mat-radio-group
[ngModel]="selectedDate"
這將跟蹤整個無線電組的選定值。然后ngClass將收音機的值與 selectedValue 進行比較
[ngClass]="selectedDate === item.proposedDateStartString ? 'selected-schedule-radio' : ''"
全部一起...
<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>
uj5u.com熱心網友回復：
在 ts 端創建一個函式并在你的 html 上使用它：(click)=“onSelect(item)”
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/464216.html