主页 / coding / 问题 / 79072061
Accepted
Chris Barr
Asked: 2024-10-10 05:02:11 +0800 CST

如何在使用异步管道时修改角度组件中的数据

  • 772

我有一个 Angular 18 组件，它接收一个可观察对象，我使用管道将其呈现在页面上async。我希望能够修改此组件内的数据，然后按“保存”按钮。

在按下“保存”按钮之前，如何编辑此组件内的值？我对使用异步管道还有些陌生，通常我只会在组件内订阅，但我试图坚持最佳实践并避免在可能的情况下订阅，而是让异步管道来处理这个问题。

以下是我正在做的事情

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

  //whenever the route params OR the selected timesheet changes...
  selectedDay$ = combineLatest({
    params$: this.activatedRoute.paramMap,
    timesheet$: this.timesheetService.selectedTimesheet$,
  }).pipe(
    switchMap((results) =>
      //now get the matching day from the timesheet
      of(results.timesheet$?.days.find((d) => d.date.dayOfWeek === results.params$.get('dayOfWeek'))),
    ),
  );

  addAbsence(absence: ITimesheetAbsence): void {
    //How do I add this to the selectedDay.absences array?
  }

  removeAbsence(absenceTimeEntity: ITimesheetAbsence): void {
    //How do I remove this from the selectedDay.absences array?
  }
}

@if (selectedDay$ | 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 $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">Save</button>
  </div>
} @else {
  <h5 class="card-header">&nbsp;</h5>
  <div class="card-body">
    <app-spinner />
  </div>
}

基本上，我希望能够在保存更改之前对组件中的数据进行更改，并使可观察对象在订阅的其他区域中做出反应

angular

3 个回答

  1. Best Answer

    只需传递selectedDay给方法即可。因为removeAbsence传递索引比传递项目本身更容易。

    addAbsence(day: DayOfWeek, absence: ITimesheetAbsence): void {
  day.absences.push(absence);
}

removeAbsence(day: DayOfWeek, absenceIndex: number): void {
  day.absences.splice(absenceIndex, 1);
}
    • 1

  2. 我会尝试这样的事情：

    const THROTTLE_DELAY_MILLISECONDS = 200; // protects users from accidentally clicking twice;

class TimesheetSelectedDayComponent {
  private readonly activatedRoute = inject(ActivatedRoute);
  private readonly timesheetService = inject(TimesheetService);
  private readonly addAbsenceEvent$ : Subject<ITimesheetAbsence> = new Subject();
  private readonly removeAbsenceEvent$ : Subject<ITimesheetAbsence> = new Subject();

  readonly selectedDay$ : Observable<SelectedDay> = combineLatest({
    params$: this.activatedRoute.paramMap,
    timesheet$: this.timesheetService.selectedTimesheet$,
  }).pipe(
    switchMap((results) =>
      //now get the matching day from the timesheet
      of(results.timesheet$?.days.find((d) => d.date.dayOfWeek === results.params$.get('dayOfWeek'))),
    )
  );

  readonly absences$: Observable<ITimesheetAbsence[]> = this.selectedDay$.pipe(
    map(sd => sd.absences),
    switchMap(a => merge(
      of(a),
      // append new absence to what we last emitted
      this.addAbsenceEvent$.pipe(
        throttleTime(THROTTLE_DELAY_MILLISECONDS),
        withLatestFrom(this.absences$),
        map(([newAbsence, absences]) => [...absences, newAbsence])
      ),
      // remove absence from what we last emitted
      this.removeAbsenceEvent$.pipe(
        throttleTime(THROTTLE_DELAY_MILLISECONDS),
        withLatestFrom(this.absences$),
        map(([absenseToRemove, absences]) => {
          const index = absences.indexOf(absenseToRemove);
          return (index === -1) ? absences : absences.splice(index, 1);
        }))
      )
    ),
    shareReplay(1)
  );

  addAbsence(absence: ITimesheetAbsence): void {
    this.addAbsenceEvent$.next(absence);
  }

  removeAbsence(absence: ITimesheetAbsence): void {
    this.removeAbsenceEvent$.next(absence);
  }
}

    然后改变

    @for (absence of selectedDay.absences; track $index)

    到

    @for (absence of absences$ | async; track absence.name)
    • 0

  3. 我很欣赏开发人员努力遵循最佳实践。为此点赞！

    你说得对；避免手动处理订阅而使用async管道是一种常见做法，或者有些人可能会说是最佳实践。async管道本质上是在可观察对象可用时订阅它，并在组件被销毁时取消订阅。这就是它流行的原因——它降低了开发人员忘记取消订阅特定值的可能性。

    我过去一直遵循这种方法，但随着新功能的推出，我现在更喜欢以下选项之一：


    1. 使用Angular 信号

    您可以利用该rxjs/interop toSignal()函数将可观察对象转换为信号，然后将该信号用于所有任务。以下是示例：

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

  selectedDay = toSignal(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'))),
    )
  ), { requireSync: true });

  addAbsence(absence: ITimesheetAbsence): void {
    this.selectedDay().absences.push(absence);
  }

  removeAbsence(absenceTimeEntity: ITimesheetAbsence): void {
    this.selectedDay().absences.splice(absenceIndex, 1);
  }
}

    请注意，使用toSignal()将立即订阅，而不会等待任何条件。但是，根据您的代码，这应该不是问题。此外，仅在注入上下文toSignal()中才允许。


    2.使用rxjs：takeUntilDestroyed()

    通过将此运算符添加到管道，您可以确保在组件被销毁时取消订阅。这样，您就可以订阅可观察对象而不必担心取消订阅。

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

  #selectedDay$ = 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'))),
    ),
    takeUntilDestroyed()
  );

  selectedDay: any;

  constructor() {
    this.#selectedDay$.subscribe(
      (res) => {
        this.selectedDay = res;
      }
    );
  }

  addAbsence(absence: ITimesheetAbsence): void {
    this.selectedDay.absences.push(absence);
  }

  removeAbsence(absenceTimeEntity: ITimesheetAbsence): void {
    this.selectedDay.absences.splice(absenceIndex, 1);
  }
}

    请注意，这也需要注入上下文。


    3. 手动订阅和取消订阅

    如果上述解决方案均不起作用，我将订阅可观察对象并取消订阅ngOnDestroy()。但是，在这种情况下，我建议遵循@JSmart523的解决方案。

    总之，我强烈建议使用 Signals 方法，因为 Angular 正朝着这个方向发展，它确保最佳实践，同时保持项目最新。Angular Signals 还提供其他好处，包括性能优势。


    参见：

    • -1

相关问题