从可观察对象解析数组中的对象

Question

我有一个关于解析数组中的 observables 的问题。 （使用Angular 11）

首先，我想描述一下场景。 假设我们有一个带有 ag-grid 的组件

table.component.html

    <ag-grid-angular
      [rowData]="data"
      [columnDefs]="columnDefs"
    >
    </ag-grid-angular>

rowData 类似于

[
  {id:0, user: 'userName1', valueBefore: 1, valueAfter:2},
  {id:1, user: 'userName1', valueBefore: 3, valueAfter:4},
  ...
]

还没有什么花哨的 - 但是， valueBefore和valueAfter的 id 需要解析为它们的名称。 为此，必须完成 http 请求，例如HTTP GET /name/1返回{id:1, name: 'one'}

不幸的是，我没有看到一个很好的方法来做到这一点。

我看到了一个解决方案，比如先获取所有名称。 然后，一次刷更新rowData object，这样表格只重新渲染一次。 但是，我必须维护一组我不喜欢的id/name对。

我不知道我是否遗漏了一些可以在这里使用的功能。

你有想法吗？ 你会如何解决这个问题？

谢谢！

Answer 1

实际上，使用 RxJS 很容易保持加载的值。 只需将此代码添加到组件中：

    cacheTimeout = 60 * 1000;
    valueCache = new Map<number, Observable<string>>();
    getValue$ = (id: number) => {
      if (!this.cache.get(id)) {
        this.cache.set(id, this.http.get('/name/'+id.toString()).pipe(
          map(result => result.name),
          publishReplay(1, this.cacheTimeout),
          refCount(),
          take(1),
        ));
      }
      return cache.get(id);
    }

并使用getValue$(id) | async 模板内的getValue$(id) | async