Angular 2点击按钮重复添加Div并实现各Div值独立的问题求助

我来帮你搞定这个问题！你现在的核心问题有两个：一是*ngFor需要遍历数组而非布尔值，二是没有给每个新增的日程模块分配独立的状态变量，导致所有模块共享同一个Opentime和Closetime。咱们一步步修改代码：

1. 定义日程数据结构 #

首先，我们需要为每个日程模块创建独立的数据模型，这样每个模块的时间状态就能单独存储。在你的组件类里定义一个接口：

// 定义每个日程的结构，存储独立的开闭时间
interface ScheduleItem {
  openTime: string;
  closeTime: string;
}

2. 初始化数组并修改添加方法 #

把原来的OpenNewSchedule改成数组类型，每次点击按钮就往数组里添加一个新的空白日程项：

// 组件类里的属性：初始化空数组，用来存储所有日程项
OpenNewSchedule: ScheduleItem[] = [];

// 修改添加方法：每次点击新增一个空白日程
AddNewSchedule() {
  this.OpenNewSchedule.push({
    openTime: '',
    closeTime: ''
  });
}

3. 修改HTML模板，绑定独立状态 #

更新*ngFor遍历数组，并且把每个模块的时间绑定到当前数组项的属性上，同时修改点击事件传递当前项，确保操作的是对应模块的状态：

<div class="schedule-time">
  <span>Add Schedule Time <span class="adr" (click)="AddNewSchedule()">+</span></span>
</div>

<!-- 遍历日程数组，每个项对应一个独立模块 -->
<div *ngFor="let schedule of OpenNewSchedule; let index = index">
  <div class="time-cl">
    <div class="time-ch">
      <div class="from-time" (click)="toggleTimeInput('open', schedule)">
        <input type="date" class="form-control hide-dt" [(ngModel)]="schedule.openTime">
        <span class="fdst">Open Time</span>
        <span class="sdst">{{schedule.openTime || '未选择'}}</span>
      </div>
      <div class="to-time" (click)="toggleTimeInput('close', schedule)">
        <input type="date" class="form-control hide-dt" [(ngModel)]="schedule.closeTime">
        <span class="fdst">Close Time</span>
        <span class="sdst">{{schedule.closeTime || '未选择'}}</span>
      </div>
      <!-- 可选：添加删除按钮，移除对应日程项 -->
      <a class="time-del" (click)="removeSchedule(index)">
        <i class="fa fa-trash"></i>
      </a>
    </div>
  </div>
</div>

4. 完善时间选择与删除方法 #

修改时间输入框的显示逻辑，添加删除日程的方法，确保每个模块的操作都是独立的：

// 切换时间输入框的显示状态（示例逻辑，可根据你的样式调整）
toggleTimeInput(type: 'open' | 'close', schedule: ScheduleItem) {
  // 这里可以实现点击显示/隐藏输入框的逻辑，比如操作DOM切换hide-dt类
  // 示例：找到当前模块的输入框并切换类
  // const input = event.target.closest('.from-time, .to-time').querySelector('input');
  // input?.classList.toggle('hide-dt');
}

// 删除指定索引的日程项
removeSchedule(index: number) {
  this.OpenNewSchedule.splice(index, 1);
}

关键说明 #

• *ngFor必须遍历数组，这样每次push新元素时，Angular才会自动渲染新的模块
• 每个日程项的openTime和closeTime都是独立存储在数组元素里，完全不会互相干扰
• 使用[(ngModel)]实现双向绑定，输入的时间会直接同步到对应日程项的属性中
• 新增的删除功能可以让用户移除不需要的日程模块，提升交互体验

内容的提问来源于stack exchange，提问作者Aashiq Rathnadas