Angular实现日程单选及默认选中最新项的技术需求

没问题，我来帮你搞定这两个功能，咱们一步步调整代码：

1. 实现点击复选框互斥选中并设置currentSchedule #

首先，咱们需要确保每个复选框的选中状态和currentSchedule关联，并且点击时更新这个值，同时保证互斥（每次只有一个被选中）。另外，循环里的id和for必须唯一，不然会出现点击一个所有都选中的问题。

修改后的HTML代码：

<div class="Box" *ngFor="let schedule of availableSchedules; let i = index"> 
 <div class="row width100"> 
  <div class="col-md-1"> 
   <div class="container"> 
    <div class="round"> 
     <input 
       type="checkbox" 
       id="checkbox-{{i}}" 
       [checked]="schedule === currentSchedule"
       (change)="selectSchedule(schedule)"
     /> 
     <label for="checkbox-{{i}}"></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>

2. 修正TypeScript代码，实现默认选中最新日程 #

接下来调整TS逻辑，首先修复selectSchedule方法的问题（原来的console.log(event)没传event会报错），然后在数据加载完成后默认选中数组最后一项（假设最新添加的日程在数组末尾）。

修改后的TS代码：

import { Component, OnInit } from '@angular/core';
// 确保你已经导入了tutorAvailablitySchedule类型

@Component({
  // 你的组件元数据（比如selector、templateUrl等）
})
export class YourComponent implements OnInit {
  currentSchedule: tutorAvailablitySchedule | undefined; 
  availableSchedules: tutorAvailablitySchedule[] = []; 

  ngOnInit() {
    // 这里替换成你实际获取日程数据的逻辑（比如API请求）
    this.getAvailableSchedules();
  }

  // 模拟获取日程数据的方法
  getAvailableSchedules() {
    // 实际场景中这里可能是HTTP请求
    // 假设获取到的数据里最后一项是最新添加的
    this.availableSchedules = [
      { startTime: '08:00', endTime: '10:00', days: ['Mon', 'Fri'] },
      { startTime: '13:00', endTime: '15:00', days: ['Tue', 'Thu'] },
      { startTime: '16:00', endTime: '18:00', days: ['Wed'] } // 最新添加的
    ];

    // 默认选中最新的日程
    if (this.availableSchedules.length > 0) {
      this.currentSchedule = this.availableSchedules[this.availableSchedules.length - 1];
    }
  }

  selectSchedule(schedule: tutorAvailablitySchedule) { 
    this.currentSchedule = schedule; 
    console.log('当前选中的日程:', schedule); 
  }
}

关键说明 #

• 唯一ID：用循环索引i给每个复选框生成唯一的id和for，避免DOM元素冲突
• 选中状态绑定：通过[checked]="schedule === currentSchedule"，只有和currentSchedule相同的日程才会被选中，自动实现互斥效果
• 默认选中逻辑：在数据加载完成后，把currentSchedule设为数组最后一项，符合“最新添加的日程”的需求
• 如果你的日程对象有唯一标识（比如id字段），建议用schedule.id === currentSchedule?.id来判断选中状态，这样比直接比较对象引用更可靠，避免因为对象实例不同导致的判断错误

内容的提问来源于stack exchange，提问作者Shubham Sharma