如何处理 HTTP Get 请求并填充到 ng-bootstrap 表中？答案

【问题标题】：How to process HTTP Get request and populate into ng-bootstrap table?如何处理 HTTP Get 请求并填充到 ng-bootstrap 表中？
【发布时间】：2019-11-08 14:16:19
【问题描述】：

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

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

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

我正在尝试找出一种方法，将一个数组从一个从 HTTP GET 请求返回的 observable 的订阅中传递到同一个位置。

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

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

我有一个 API 服务。我们称对象类型为组。我的组服务正在调用 API 服务中名为 getgroups() 的方法。我努力了： - 订阅 API 服务中的公共行为主体。

订阅API服务中getgroups()的返回行为主体对象。
我已尝试在组服务中延迟排序以等待 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 请求
组服务记录一个空的行为主题对象
组件控制器返回一个空的 observable
组服务将所有组的列表返回给组件控制器（每个分页设置只能是前 10 个组
API 服务完成请求

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

【问题讨论】：

尝试在您的请求中使用.pipe，例如this.http.get<Group[]>(environment.apiEndpoint").pipe( tap((resultGroups: Group[]) => { groups.next(resultGroups)}));
我刚试过，它似乎没有执行里面的内容。我什至试过这个，没有日志：this.http.get<Group[]>(environment.apiEndpoint").pipe( tap((resultGroups: Group[]) => { console.log("reached tap"); groups.next(resultGroups)}))

标签： angular bootstrap-4 http-get

【解决方案1】：

我找到了造成这些问题的根本原因。我正在使用来自 HTTP 请求的数据填充 Observable。我使用了与排序/搜索/分页结果相同的 observable。这些需要在单独的变量中才能正常工作。

【讨论】：