javascript Rxjs Observable Array of Objects添加key/pair

z9zf31ra 于 2023-06-04 发布在 Java

关注(0)|答案(1)|浏览(177)

我有角应用程序与状态管理，这是在哪里我从数据库中加载数据的工作在可观察的喜欢
让我们先给予你接口

interface service {
  id: number,
  name:string,
  category_id: number,
}

interface category{
  id:number,
  name:string,
}

正如你所看到的，服务和类别之间存在联系，通过ID（编号）进行链接。
让我们给予你一个可观察的样子

services : Observable<Service[]>

categories : Observable<Category[]>

我如何将类别名称合并到服务中，变成像这样不同的东西：

interface ServiceWithCategory{
  id: number,
  name:string,
  category_id: number,
  category:string,
}

我试着在angular中使用一些异步管道，但是如果类别更新了，它不会更新

const serviceswithcategory = services.pipe(
      map(i => i.map((service) => {
        return {
          ...service,
          Category: `${this.async.transform(categories.pipe(map((i) => { 
           return i.find((a: Category) => a.id == service.category_id) }))?.name}
           }`
        }
      })));

现在，当category被更新时，serviceswithcategory不做任何事情。它对类别没有React。

JavaScript

来源：https://stackoverflow.com/questions/76396604/rxjs-observable-array-of-objects-add-key-pair

1条答案

按热度按时间

46qrfjad1#

下面是你要的代码：

forkJoin({ services: services$, categories: categories$ })
  .pipe(
    map(({ services, categories }) => {
      const categoriesById = categories.reduce((acc, category) => {
        acc[category.id] = category;
        return acc;
      }, {});

      return services.map((service) => ({
        id: service.id,
        name: service.name,
        category: categoriesById[service.category_id],
      }));
    })
  )

forkJoin让我们得到2个可观测值的结果
使用reduce，我们将类别转换为类别字典，以便能够通过ID访问它们，而不是使用循环中的循环（为每个服务查找类别），这将是低效的
然后我们Map到服务并获得相应的类别

结果：

[
    {
        "id": 1,
        "name": "Service 1",
        "category": {
            "id": 100,
            "name": "Category 100"
        }
    },
    {
        "id": 2,
        "name": "Service 2",
        "category": {
            "id": 200,
            "name": "Category 200"
        }
    },
    {
        "id": 3,
        "name": "Service 3",
        "category": {
            "id": 100,
            "name": "Category 100"
        }
    }
]

下面是一个live example（查看控制台的输出）。

赞(0）回复(0）举报 2023-06-04

我来回答

javascript Rxjs Observable Array of Objects添加key/pair

1条答案

相关问题

热门标签

最新问答