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

Question

我有一个关于解析数组中的可观察对象的问题。（使用 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 其中 returns {id:1, name: 'one'}

不幸的是，我没有找到一个好的方法。

我看到了一个解决方案，例如首先获取所有名称。然后，一次性更新 rowData 对象，使 table 只重新渲染一次。但是我不得不维护一个我不喜欢的 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

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

Resolve objects in array from observables

frontend

rxjs

ag-grid

angular

rxjs-observables