Как обработать HTTP-запрос Get и заполнить таблицу ng-bootstrap? - PullRequest
Новая
       32

Как обработать HTTP-запрос Get и заполнить таблицу ng-bootstrap?

0 голосов
/ 26 июня 2019

Следуя полному примеру здесь: https://ng -bootstrap.github.io / # / components / table / examples , я реализую таблицу с сортировкой, поиском и разбивкой на страницы.Я использую Angular 7 и последнюю версию ng-bootstrap.

В примере используется статический массив объектов: 

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

Я пытаюсь найти способ передать массивиз подписки наблюдаемой, которая возвращается из HTTP-запроса GET в это же место.

Проблема заключается в том, что HTTP-GET требуется около секунды для извлечения из API.Это приводит к тому, что подписка возвращает пустой массив и сортировка, поиск и разбиение на страницы не применяются.

Как заставить объектную службу ожидать возвращения данных и заполнения массива до начала сортировки?

У меня есть служба API.Давайте назовем группы типов объектов.Моя групповая служба вызывает метод в службе API, называемый getgroups ().Я попытался: - подписаться на субъект публичного поведения в службе API.

  • подписаться на объект субъекта возвращаемого поведения getgroups () в службе API.

  • Я попытался отложить сортировку в групповой службе, пытаясь дождаться завершения запроса 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
  • Служба группы регистрирует пустой объект субъекта поведения
  • Контроллер компонента возвращает пустую наблюдаемую
  • Служба группы возвращает список всех групп контроллеру компонента (должен быть только первым 10per pagination settings
  • Служба API завершает запрос

Я хочу, чтобы служба API начиналась и заканчивалась, а затем групповая служба обновляет и возвращает отсортированные и разбитые на страницы данные в компонентконтроллер.

1 Ответ

0 голосов
/ 03 июля 2019

Я нашел основную причину, которая создавала эти проблемы. Я заполнял Observable данными из HTTP-запроса. Я использовал то же самое, что и в результате сортировки / поиска / разбиения на страницы. Они должны быть в отдельных переменных для правильной работы.

...