Распространенной проблемой при представлении данных, полученных с сервера, является уменьшение объема данных, предоставляемых в запросе на выборку. Это повышает эффективность работы клиента, сервера и сети между ними.

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

Большинство (все?) серверов разбивки на страницы будут заключать данные в некоторые метаданные, чтобы описать текущее местоположение в наборе данных. Как нам работать с таким сервером, используя стандартные инструменты, предлагаемые нам библиотеками Angular?

Рассмотрим ответ без разбивки на страницы для списка MyObjects (в данном случае в списке только один элемент):

[{
    "updatedAt": "2018-03-07T00:00:00Z",
    "createdAt": "2018-03-07T00:00:00Z",
    "name": "My Test Model"
}]

В качестве ответа на асинхронный вызов HTTPClient нам рекомендуется думать об этом как о потоке данных, на который мы подпишемся. Мы часто будем использовать DataSource для подключения к потоку:

Затем этот источник данных будет подписан как резервные данные для таблицы данных или чего-то подобного.

В моей конкретной разбитой на страницы библиотеке ответ сервера в формате JSON выглядит следующим образом:

{ "data": [{
     "updatedAt": "2018-03-07T00:00:00Z",
     "createdAt": "2018-03-07T00:00:00Z",
     "name": "My Test Model"
    }],
  "page": {
    "position": {
      "current": 1,
      "max": 1
    },
    "data": {
      "per": 10,
      "total": 2
    }
  }
}

Это может быть трудно увидеть в приведенном выше примере, но ответ был заключен в структуру, состоящую из двух частей (а не трех) — раздела «данные», который содержит тот же массив объектов данных, что и в первом примере, плюс «страница ', который включает метаданные для описания того, где мы находимся в полном наборе данных для этого конкретного ответа.

Думая об этом ответе, было бы ошибкой рассматривать ответ как нечто иное, чем асинхронный поток, как и версию без разбивки на страницы. У нас есть два потока данных.

Если мы используем эту ментальную структуру, мы можем легко создать источник данных, содержащий два зависимых субъекта:

Здесь мы видим, что мы определяем структуру для оболочки ответа (я разделил ее на часть метаданных и часть оболочки, чтобы их было легко увидеть), и мы добавляем новую тему rxjs для хранения метаданных.

Мы предоставляем метаданные как общедоступный наблюдаемый объект вне вызова «connect», чтобы мы могли наблюдать за ним через компонент разбиения на страницы, независимый от табличного представления.

Последняя часть заключается в том, что мы направляем две части нашего разбитого на страницы ответа двум субъектам как часть нашего вызова загрузки.