如何处理 HTTP Get 请求并填充到 ng-bootstraptable？

Question

按照此处的完整示例：https://ng-bootstrap.github.io/#/components/table/examples，我正在实施一个 table，具有排序、搜索和分页功能。我正在使用 Angular 7 和最新版本的 ng-bootstrap.

该示例使用对象的静态数组：

// 1. sort
    let countries = sort(COUNTRIES, sortColumn, sortDirection);

我正在尝试找出一种方法，将一个数组从一个可观察对象的订阅中传递出去，这个数组是从一个 HTTP GET 请求 returned 到同一个地方的。

问题是 HTTP GET 从 API 中检索大约需要一秒钟。这会导致订阅 return 一个空数组，并且不应用排序、搜索和分页。

如何让对象服务等待数据 return 并在排序开始前填充数组？

我有一个 API 服务。让我们调用对象类型组。我的群组服务正在调用 API 服务中名为 getgroups() 的方法。我试过了： - 订阅 API 服务中的 public 行为主题。

订阅API服务中getgroups()的return行为主体对象
我曾尝试延迟组服务中的排序，以等待 GET 请求完成。这似乎没有影响。
我已经尝试放置来自组构造函数的代码：

this._search$.pipe(
      tap(() => this._loading$.next(true)),
      debounceTime(200),
      switchMap(() => this._search()),
      delay(200),
      tap(() => this._loading$.next(false))
    ).subscribe(result => {
      this._groups$.next(result.groups);
      this._total$.next(result.total);
    });

    this._search$.next();

在分配数据后的 HTTP GET 请求中：

this.http.get<Group[]>(environment.apiEndpoint").(
      (resultGroups: Group[]) => {
        groups.next(resultGroups);
HERE -->
      },
      (err: any) => {
        console.log(err);
      },
      () => { 
      }
    );

我添加了扩展日志记录，它显示了调用顺序。

API 服务开始 HTTP GET 请求
群组服务记录一个空的行为主体对象
组件控制器return是一个空的可观察对象
组服务return是组件控制器的所有组的列表（每个分页设置应该只有前 10 个
API 服务完成请求

我希望 API 服务开始和结束，然后组服务更新并将排序和分页的数据 return 发送到组件控制器。

Answer 1

我找到了造成这些问题的根本原因。我用来自 HTTP 请求的数据填充了一个 Observable。我使用与 sorting/searching/pagination 的结果相同的可观察对象。这些需要在单独的变量中才能正常工作。

如何处理 HTTP Get 请求并填充到 ng-bootstraptable？

How to process HTTP Get request and populate into ng-bootstrap table?

http-get

bootstrap-4

angular