Angular/RxJs 如何从Observable的数组键值对中获取指定值

问题原因&解决方案 #

1. 模板调用filterLabels死循环的原因

Angular变更检测会在每一次视图更新时机重新执行模板内所有表达式，你在模板中调用该方法时每次都会返回新的Observable实例，async管道订阅新实例拿到返回值后又会触发新一轮变更检测，最终形成无限循环。

2. 转成map后模板取值不生效的原因

convertedLabels$本身是Observable类型的对象，你直接对它取['labels.header.defaultTitle']属性是取Observable自身的属性，而非它异步发射的键值对对象的属性。async管道的优先级低于属性访问，所以需要先通过async拿到实际值，再访问对应键。正确的模板写法如下：

<h1>{{ (convertedLabels$ | async)?.['labels.header.defaultTitle'] }}</h1>

?.是可选链运算符，用来避免流还未返回值时报空指针错误。

推荐实现方案 #

以下两种方案都同时支持模板和组件内调用：

方案一：预转键值对对象流

直接把原始标签数组流转成Record<string, string>类型的Observable，用的时候直接取值即可：

// 组件内代码
import { firstValueFrom, map } from 'rxjs';

convertedLabels$ = this.labelsService.labels$.pipe(
  map(labelsArray => 
    labelsArray.reduce((acc, curr) => {
      acc[curr.key] = curr.value;
      return acc;
    }, {} as Record<string, string>)
  )
);

// 组件内需要取值时调用该方法即可
async getLabelByKey(key: string): Promise<string | undefined> {
  const labelMap = await firstValueFrom(this.convertedLabels$);
  return labelMap[key];
}

模板用法就是上面提到的正确写法。

方案二：封装纯管道（适合多场景复用）

封装纯管道实现按需取值，纯管道只有输入参数变化时才会重新计算，不会触发重复执行的问题：

// get-label.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
import { Observable, map } from 'rxjs';

interface LabelItem {
  key: string;
  value: string;
}

@Pipe({
  name: 'getLabel',
  pure: true
})
export class GetLabelPipe implements PipeTransform {
  transform(labels$: Observable<LabelItem[]>, key: string): Observable<string | undefined> {
    return labels$.pipe(
      map(list => list.find(item => item.key === key)?.value)
    );
  }
}

模板中直接链式调用即可：

<h1>{{ labels$ | getLabel: 'labels.header.defaultTitle' | async }}</h1>

组件内要取值时直接复用过滤逻辑即可，不需要额外定义大量冗余变量。

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