如何用RxJS操作符将Observable的部分属性赋值给另一个Observable

我有一个employee$ Observable和一个personalInformation$ Observable，其中personalInformation$的结构是employee$的子集。我需要把employee$中的匹配属性映射到personalInformation$上，以下是简化后的类型定义（实际包含更多字段）：

export interface EmployeeModel {
  id: number;
  personalEmail: string;
  firstName: string;
  lastName: string;
  remote: boolean;
  office: string;
}
employee$: Observable<EmployeeModel>;

Personal Information #

export interface PersonalInformationModel {
  id: number;
  personalEmail: string;
  firstName: string;
  lastName: string;
}
personalInformation$: Observable<PersonalInformationModel>;

以下是我尝试但未成功实现的代码：

this.personalInformation$ = this.employee$
  .pipe(
    map((data) => {
      data!.id,
      data!.personalEmail,
      data!.firstName,
      data!.lastName
    }),
    catchError(err => {
      const message = "Could not load record";
      this.logService.error(message, err)
      return throwError(() => new Error(err));
    })
  );

你当前的map操作只是罗列了属性，没有返回符合PersonalInformationModel结构的对象，这是代码失效的核心原因。需要在map中明确返回包含指定属性的对象，以下是两种可行写法：

写法一：对象解构提取属性 #

this.personalInformation$ = this.employee$
  .pipe(
    map(({ id, personalEmail, firstName, lastName }) => ({
      id,
      personalEmail,
      firstName,
      lastName
    })),
    catchError(err => {
      const message = "Could not load record";
      this.logService.error(message, err);
      return throwError(() => new Error(err));
    })
  );

写法二：手动构造对象 #

this.personalInformation$ = this.employee$
  .pipe(
    map(data => ({
      id: data.id,
      personalEmail: data.personalEmail,
      firstName: data.firstName,
      lastName: data.lastName
    })),
    catchError(err => {
      const message = "Could not load record";
      this.logService.error(message, err);
      return throwError(() => new Error(err));
    })
  );

如果data可能为null或undefined，可以保留data!非空断言，或者通过可选链+默认值处理空值场景，确保返回的对象符合PersonalInformationModel接口要求。

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