Angular日历事件标题与颜色无法同步更新问题求助

你遇到的核心问题有两个：

1. 使用Form表单修改事件时，没有将表单更新的值同步回events数组，也未触发日历组件刷新，导致日历上的事件无变化
2. 使用ngModel循环绑定所有事件时，弹窗会展示全部事件，无法只聚焦当前点击的单个事件

方案一：基于Form表单的正确实现 #

1. 组件内添加变量保存当前点击事件 #

在AppComponent中新增变量，用于存储当前点击的事件引用：

currentEvent: CalendarEvent | null = null;

2. 修改eventClicked方法，保存当前事件并初始化表单 #

eventClicked({ event }: { event: CalendarEvent }): void {
  this.currentEvent = event;
  this.profileForm.patchValue({
    title: event.title,
    color: event.color.primary
  });
  this.openPopup();
}

3. 修复模态框表单的冲突绑定 #

移除输入框中混用的ngModel和[value]，仅保留formControlName：

<form [formGroup]="profileForm">
  <div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':displayStyle}">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4>编辑事件</h4>
          <div class="titleBlock">
            <input
              type="text"
              id="title"
              class="form-control"
              formControlName="title"
            />
            <input
              type="color"
              class="form-control"
              formControlName="color"
            />
          </div>
        </div>
        <div class="modal-body">
          <p>One Stop Solution for all CS problems</p>
        </div>
        <div class="modal-footer">
          <!-- 新增保存按钮 -->
          <button type="button" class="btn btn-primary" (click)="saveEvent()">保存</button>
          <button type="button" class="btn btn-danger" (click)="closePopup()">关闭</button>
        </div>
      </div>
    </div>
  </div>
</form>

4. 实现保存逻辑，同步更新到events数组 #

在组件中添加saveEvent方法，将表单值更新回原数组并触发日历刷新：

saveEvent(): void {
  if (!this.currentEvent) return;

  // 不可变更新数组，触发Angular变更检测
  this.events = this.events.map(item => {
    if (item === this.currentEvent) {
      return {
        ...item,
        title: this.profileForm.value.title || item.title,
        color: {
          ...item.color,
          primary: this.profileForm.value.color || item.color.primary
        }
      };
    }
    return item;
  });

  // 触发日历组件刷新
  this.refresh.next();
  this.closePopup();
}

方案二：基于ngModel的优化实现（仅显示当前点击事件） #

1. 组件内添加变量保存当前点击事件 #

同样新增currentEvent变量：

currentEvent: CalendarEvent | null = null;

2. 修改eventClicked方法，绑定当前事件 #

eventClicked({ event }: { event: CalendarEvent }): void {
  this.currentEvent = event;
  this.openPopup();
}

3. 修改模态框模板，移除循环直接绑定当前事件 #

去掉*ngFor，通过*ngIf判断是否存在当前事件，仅渲染单个事件的编辑项：

<ng-container #modalContent >
  <div class="modal" tabindex="-1" role="dialog" [ngStyle]="{'display':displayStyle}">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h4>编辑事件</h4>
          <!-- 仅渲染当前点击的事件 -->
          <div *ngIf="currentEvent" class="titleBlock">
            <input
              type="text"
              class="form-control"
              [(ngModel)]="currentEvent.title"
              (keyup)="refresh.next()"
            />
            <input
              type="color"
              [(ngModel)]="currentEvent.color.secondary"
              (change)="refresh.next()"
            />
            <span><i class="bi bi-check2 done" (click)="deleteEvent(currentEvent)" ></i></span> 
          </div>
        </div>
        <div class="modal-body">
          <p>One Stop Solution for all CS problems</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" (click)="closePopup()">Close</button>
        </div>
      </div>
    </div>
  </div>
</ng-container>

• 必须保存当前点击的事件引用，才能精准定位要修改的目标事件
• 更新events数组时要遵循不可变更新原则（如使用map方法），确保Angular能检测到数组变化
• 每次修改后调用refresh.next()触发日历组件刷新
• 不要同时混用FormControl和ngModel，避免表单绑定冲突

内容的提问来源于stack exchange，提问作者Adrita Tory