angular 垫单选组 select 索引

Question

我在一个来自循环的垫子单选组中有一个单选按钮，按钮和卡片应该根据所选索引进行着色，但是正如您在屏幕截图中看到的那样，单选按钮被选中但没有着色白色

基于selected index or selected radio的单选按钮应该是这样的，但是目前我的逻辑不起作用。感谢您的帮助。

伙计们有什么想法吗？谢谢。

#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;
}

Answer 1

在 ts 端创建一个函数并在你的 html 上使用它：(click)=“onSelect(item)”

Answer 2

您不需要为此举办 change 活动。在你的 TS 中创建一个范围变量来保存值，比如

this.selectedDate='';

在 mat-radio-group 元素上放置一个 ngmodel 绑定。

[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>

angular 垫单选组 select 索引

angular mat radio group select index

javascript

radio-button

angularjs

typescript

angular