Angular/RxJs：如何从 Observable 中的数组中的键值对中检索特定值

Question

这里是简化的demo。

有没有一种简单的方法可以在模板中打印来自Array 的特定元素的值在Observable 中？问题是我有一个键值对列表，其中键具有一些特定的结构，并且每个键之间的它们可能不同。而且我想知道是否有任何方法可以创建某种转换器到对象，其中字段将是键的文字。或者有没有很好的解决方案通过传递键来检索值，但是它可以在模板和组件上使用。因此，例如直接从labels$ 中提取给定键的值。

在给定的演示中，我有方法filterLabels(key: string)，当我在组件中使用它时效果很好。但这会导致每个标签等都有很多变量。当我尝试从模板调用此方法时，它进入了无限循环...

免责声明：出于某种原因，json 不想在带有注释代码的 labels.service.ts 中下载，其中类似的代码适用于我的原始应用程序。

编辑：

新demo。

我试图将 json 减少到映射。但是不明白为什么它适用于console.log(mapAccumulator['labels.header.defaultTitle']);，并且不适用于模板<h1>{{ convertedLabels$['labels.header.defaultTitle'] | async }}</h1>。

Answer 1

原答案

异步管道返回对象。

现在你正在尝试获取一个不存在的 observable 成员， 您应该从异步管道的结果中获取成员，如下所示：

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

或者使用提供默认值的三元：

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

更新

问题是您在 html 中使用来自异步调用的值。创建组件时尚未检索到此值，这就是为什么异步管道会失败一秒钟直到检索到该值。

您可以使用异步管道使用的初始值创建主题，直到您的调用检索到新值，然后将该新值推送到主题。

然后，您可以从该主题创建一个 observable，并使用 getter 在您的组件中使用它。

示例服务：

private labelsSubject = new BehaviorSubject<LabelPair[]>(this.defaultLabelPairArray)

get labels$() {
  return this.labelsSubject.asObservable()
}

constructor(private http: HttpClient) {}

getLabels() {
  this.http.get<LabelPair[]>('/assets/labels.json').subscribe(
    labelPair => this.labelsSubject.next(labelPair)
  )
}

这是您的Stackblitz 的经过审查和清理的版本。

另一种选择

您还可以使用定义的对象而不是映射，通过稍微更改可观察对象的映射来进行类型检查：

HTML：

<h1>{{ (convertedLabels$ | async) ? (convertedLabels$ | async)?.defaultTitle : 'Default' }}</h1>

对映射进行分类：

class Labels {
  defaultTitle: string;
  otherTitle: string;
  name: string;
}

convertedLabels$ = this.labelService.getLabels().pipe(
  map((m) =>
    m.reduce((mapAccumulator, obj) => {
      const keyParts = obj.key.split('.')
      const key = keyParts[keyParts.length - 1]
      mapAccumulator[key] = obj.value;
      return mapAccumulator;
    }, new Labels())
  )
);

还有一个Stackblitz。