如何在Angular NGRX中将一种类型的Observable转换为另一种类型的Observable

核心使用RxJS的map操作符实现流内数据转换，该操作符可以对Observable发射的每一个值做自定义处理后返回新的值，完全匹配你的需求。

注意：你示例中拼写的firt-name为笔误，以下统一修正为标准的first-name；原选择器返回的是数组类型，请根据你的实际需求匹配变量类型。

场景1：转换后保持数组结构（原数组每一项都转为目标格式） #

第一步：导入依赖 #

import { map } from 'rxjs';

完整代码实现 #

// 变量类型需声明为数组
myVariable: {'first-name': string}[];

this.store.pipe(
  select(mySelector),
  map((originList: {name: string; age: number}[]) => {
    return originList.map(item => ({
      'first-name': item.name
    }))
  })
).subscribe(result => {
  this.myVariable = result;
})

场景2：转换后为单个对象（取数组第一个元素的name赋值） #

如果你的需求是只提取数组第一条数据生成单个对象，使用以下代码：

import { map } from 'rxjs';

myVariable: {'first-name': string};

this.store.pipe(
  select(mySelector),
  map((originList: {name: string; age: number}[]) => {
    // 兼容数组为空的边界情况，避免运行时报错
    const targetName = originList[0]?.name ?? '';
    return { 'first-name': targetName };
  })
).subscribe(result => {
  this.myVariable = result;
})

补充说明 #

• 所有自定义转换逻辑都可以写在map操作符的回调函数内，直接处理原选择器返回的数组即可
• 生产环境建议添加组件销毁时的取消订阅逻辑，避免内存泄漏，可通过takeUntil操作符或者Angular内置的async管道实现

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