выберите конкретный кортеж в angular

Question

в моем angular приложении у меня есть список объектов расписания в массиве расписания, которые отображаются с помощью ngFor.

я хочу, чтобы всякий раз, когда я нажимал флажок слева от окна моего расписания, это конкретное расписание выбрано как текущее расписание, а для отдыха установлено значение false.

Я также хочу, чтобы мое выбранное по умолчанию расписание было тем, которое было добавлено в массив самым последним.

вот мой код HTML

<div class="Box" *ngFor="let schedule of availableSchedules">
            <div class="row width100">
              <div class="col-md-1">
                <div class="container">
                  <div class="round">
                    <input type="checkbox" id="checkbox" />
                    <label for="checkbox"></label>
                  </div>
                </div>
              </div>
              <div class="col-md-11">
              <div class="row width100" style="font-size: larger;">
                <div class="col-md-4">
                  From : <span>{{schedule.startTime}}</span>
                </div>
                <div class="col-md-4">
                  To : <span>{{schedule.endTime}}</span>
                </div>
                <div class="col-md-2"></div>
              </div>
              <label for="days" style="font-size: larger;">Days</label>
              <div class="row" name="days" style="margin-top: 5px;padding-left: 5px;">
                <span class="chip" *ngFor="let day of schedule.days">{{day}}</span>
              </div>  
              </div> 
            </div>
          </div>

вот мой ts код

currentSchedule = new tutorAvailablitySchedule();
availableSchedules: tutorAvailablitySchedule[] = [];

selectSchedule(schedule:tutorAvailablitySchedule) {
    this.currentSchedule = schedule;
    console.log(event);
}

Answer 1

Что вы должны выполнить задание:

<input type="checkbox"
  [ngModel]="schedule===currentSchedule"
  (ngModelChange)="selectSchedule($event ? schedule : null)" />

Если вам нужно предотвратить пустой выбор, вы должны вместо этого использовать переключатель. В этом случае вам не нужно определять функцию selectSchedule:

<input type="radio" name="schedule"
  [value]="schedule" 
  [(ngModel)]="currentSchedule"/>