时间戳

首页 > 解决方案 > 用于嵌套数组的 RXJS 运算符

angular - 用于嵌套数组的 RXJS 运算符

问题描述

我从可观察到的输出如下所示。我想将此输出转换为字符串格式，就像所有真实记录 "John~Ford,Fiat"一样。我想使用 RXJS 运算符来实现这一点。有人可以告诉我如何做到这一点。

[{
  "name":"John",
  "age":30,
  "selected" : true,
  "cars": [
      { "selected":"true",  "name":"Ford", "models": "Mustang"},
      { "selected":"false", "name":"BMW", "models": "320" },
      { "selected":"true", "name":"Fiat", "models":"500" }
  ]
 },
 {
  "name":"alex",
  "age":40,
  "selected" : false
  "cars": [
      { "selected":"true",  "name":"tesla", "models": "x"},
      { "selected":"false", "name":"merc", "models": "300" },
      { "selected":"true", "name":"honda", "models":"accord" }
   ]
  }
]

我能够过滤记录，但不确定如何将其格式化为字符串输出（“John~Ford,Fiat”。）

myComp.myService.carOptions$.pipe(
      take(1),
      flatMap(carOptions => carOptions as options[]),
      filter(carOption => carOption.selected === true),
      flatMap(options => options.values as values[]),
      filter(optionValue => optionValue.isSelected === true),
      toArray()
);

标签： angularrxjsobservable

解决方案

这不是 RxJS 问题，而是 javascript 数组问题。

RxJSfilter操作符保护管道，只让符合其标准的值通过。它不会过滤掉通过的值中的项目。

take您目前在其中的过滤器只会让第一个值通过而不会更多。您可能不想将其保留在那里，但这不是这里的主要问题。

相反，您想从可观察对象中获取什么，并将其转换为不同的值。这是在RxJS地图运算符内部完成的。

myComp.myService.carOptions$.pipe(
  map((result: any): string => {
    return result
      .filter(x => x.selected)
      .map(x => {
        const cars = x.cars
          .filter(x => x.selected)
          .map(x => x.name)
          .join(',');
        return `${x.name}~${cars}`;
      }).join('|');
  })
).subscribe(result => {      
  console.log(result);
});

函数内的映射将您问题中的数组转换为与您的条件匹配的字符串数组。

首先，它只保留选定的顶级对象。然后它将每个对象映射到一个字符串。该字符串是 "name" "~" 的串联，以及 selected 为 true 的汽车名称的连接列表。

我假设 car.selected 应该是布尔类型。如果它实际上是字符串类型，您将需要修改检查。

演示：https ://stackblitz.com/edit/angular-snatak

推荐阅读