使用async pipe时如何修改Angular组件中的数据

在使用async pipe时，直接修改其返回的数据会破坏单向数据流（原Observable不会触发新的发射，且可能意外影响其他订阅者）。正确的做法是维护一个本地编辑副本，与原Observable同步状态，编辑操作仅针对副本，保存时再将修改同步回数据源。

实现方案 #

1. 组件内维护本地编辑状态 #

通过RxJS的BehaviorSubject管理本地编辑中的数据，同时监听原selectedDay$的变化，确保本地副本与源数据同步：

import { Component, inject } from '@angular/core';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { BehaviorSubject, combineLatest, map, of, switchMap } from 'rxjs';
import { TimesheetService } from './timesheet.service';
import { ITimesheetDay, ITimesheetAbsence } from './models';

export class TimesheetSelectedDayComponent {
  private readonly activatedRoute = inject(ActivatedRoute);
  private readonly timesheetService = inject(TimesheetService);

  // 原数据源Observable
  private readonly selectedDaySource$ = combineLatest({
    params$: this.activatedRoute.paramMap,
    timesheet$: this.timesheetService.selectedTimesheet$,
  }).pipe(
    switchMap((results) =>
      of(results.timesheet$?.days.find((d) => d.date.dayOfWeek === results.params$.get('dayOfWeek'))),
    ),
    map(day => day ? JSON.parse(JSON.stringify(day)) : null) // 深拷贝，避免修改原对象
  );

  // 本地编辑状态Subject
  private readonly _editingDay$ = new BehaviorSubject<ITimesheetDay | null>(null);
  // 供模板订阅的Observable：优先使用本地编辑数据，无则使用源数据
  editingDay$ = combineLatest([this.selectedDaySource$, this._editingDay$]).pipe(
    map(([originalDay, editingDay]) => editingDay ?? originalDay)
  );

  addAbsence(absence: ITimesheetAbsence): void {
    const currentDay = this._editingDay$.value ?? this.selectedDaySource$.value;
    if (!currentDay) return;

    // 创建新对象（不可变更新），避免修改原引用
    const updatedDay = {
      ...currentDay,
      absences: [...currentDay.absences, absence]
    };
    this._editingDay$.next(updatedDay);
  }

  removeAbsence(absenceToRemove: ITimesheetAbsence): void {
    const currentDay = this._editingDay$.value ?? this.selectedDaySource$.value;
    if (!currentDay) return;

    const updatedDay = {
      ...currentDay,
      absences: currentDay.absences.filter(a => a.id !== absenceToRemove.id) // 建议用唯一ID判断，而非引用
    };
    this._editingDay$.next(updatedDay);
  }

  saveChanges(): void {
    const editedDay = this._editingDay$.value;
    if (!editedDay) return;

    // 调用服务保存修改，确保服务会更新selectedTimesheet$
    this.timesheetService.updateDay(editedDay).subscribe({
      next: () => {
        // 保存成功后重置本地编辑状态，让源数据接管
        this._editingDay$.next(null);
      },
      error: (err) => {
        // 处理错误，比如显示提示
        console.error('保存失败', err);
      }
    });
  }
}

2. 修改模板绑定本地编辑Observable #

将模板中的selectedDay$替换为editingDay$，并添加保存按钮的点击事件：

@if (editingDay$ | async; as selectedDay) {
  <h5 class="card-header">{{ selectedDay.date }}</h5>
  <div class="card-body">
    <ul class="list-group">
        <li class="list-group-item">
          <app-time-entity-editor name="Work Day" [timeEntityObject]="selectedDay.workDay" />
        </li>
        <li class="list-group-item">
          <app-time-entity-editor name="Lunch" [timeEntityObject]="selectedDay.lunch" />
        </li>
        @for (absence of selectedDay.absences; track absence.id) { <!-- 优先用唯一ID追踪，而非$index -->
          <li class="list-group-item">
            <app-time-entity-editor
              isRemovable="true"
              [name]="absence.name"
              [timeEntityObject]="absence"
              (removeClick)="removeAbsence($event)"
            />
          </li>
        }
      </ul>

      <app-absence-selector class="d-block mt-2" (selectAbsence)="addAbsence($event)" />
    </div>

    <button type="button" class="btn btn-outline-success btn-lg" (click)="saveChanges()">Save</button>
  </div>
} @else {
  <h5 class="card-header">&nbsp;</h5>
  <div class="card-body">
    <app-spinner />
  </div>
}

关键细节说明 #

• 不可变更新：每次修改都创建新对象（而非直接修改原引用），确保状态变化可被RxJS检测到，同时避免意外修改源数据。
• 深拷贝：使用JSON.parse(JSON.stringify())做简单深拷贝，若数据包含Date、函数等复杂类型，建议使用自定义深拷贝函数或Immer库简化操作。
• 状态同步：combineLatest确保本地编辑状态与源数据自动同步，当路由或选中时间表变化时，本地副本会自动重置为最新源数据。
• 保存逻辑：保存成功后重置本地编辑状态，让源Observable的新值接管，确保其他订阅者能收到更新后的数据。

内容的提问来源于stack exchange，提问作者Chris Barr