Bind Angular Mat Paginator с внутренним API JSON - PullRequest
0 голосов
/ 25 февраля 2020

В моем приложении у меня есть Spring REST Controller, который предоставляет данные в формате JSON, эти данные уже представлены в разбивке на страницы; в моем Angular внешнем интерфейсе я объявил компонент mat-paginator для получения входящих данных от внутреннего интерфейса, но, насколько я понял до сих пор, mat-paginator обрабатывает формат страницы самостоятельно (например, если бы я объявил массив из 20 фиктивных элементов и установил для страницы mat-paginator 10 элементов, Angular предоставляет для обработки счетчика страниц значение «2»), но я бы сделал эту вещь совместимой с back- конец уже предоставленного формата страницы без настройки его даже в front-end. Возможно ли это сделать? Или мне нужно передать весь список элементов в невыгружаемом формате, чтобы сделать страницу прямо в front-end? Это код результата страницы из серверной части:


{
  "content": [
    {
      "id": 89461,
      "name": "eu",
      "address": "73258 South Fairbanks Ct.",
      "tel_number": 330362914,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          44.92497,
          36.1748
        ]
      },
      "creation_date": "2010-11-18"
    },
    {
      "id": 99459,
      "name": "montes",
      "address": "28683 South Nauru Way",
      "tel_number": 328650809,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          34.26616,
          60.14567
        ]
      },
      "creation_date": "2010-11-18"
    },
    {
      "id": 13366,
      "name": "massa",
      "address": "20549 East Liberia Blvd.",
      "tel_number": 333236540,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          53.24598,
          38.3594
        ]
      },
      "creation_date": "2010-11-19"
    },
    {
      "id": 31927,
      "name": "tempor",
      "address": "48262 South Barbados Ct.",
      "tel_number": 327365240,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          42.17593,
          45.67655
        ]
      },
      "creation_date": "2010-11-19"
    },
    {
      "id": 16455,
      "name": "vehicula",
      "address": "63846 West Costa Rica Way",
      "tel_number": 333771974,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          50.84762,
          -3.74278
        ]
      },
      "creation_date": "2010-11-19"
    },
    {
      "id": 4068,
      "name": "elementum",
      "address": "39129  Henderson Blvd.",
      "tel_number": 333345108,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          17.93082,
          17.60466
        ]
      },
      "creation_date": "2010-11-20"
    },
    {
      "id": 39076,
      "name": "eros",
      "address": "75697 East Greece St.",
      "tel_number": 333710853,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          35.36623,
          15.51502
        ]
      },
      "creation_date": "2010-11-20"
    },
    {
      "id": 58449,
      "name": "sit",
      "address": "69309 East Aruba St.",
      "tel_number": 332365281,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          16.37542,
          21.24491
        ]
      },
      "creation_date": "2010-11-21"
    },
    {
      "id": 17085,
      "name": "magna",
      "address": "82350 West Falkland Islands (Malvinas) Ln.",
      "tel_number": 333290644,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          50.665,
          12.32584
        ]
      },
      "creation_date": "2010-11-21"
    },
    {
      "id": 11438,
      "name": "massa",
      "address": "54294  Billings St.",
      "tel_number": 331961026,
      "coordinates": {
        "type": "Point",
        "coordinates": [
          52.1453,
          43.26645
        ]
      },
      "creation_date": "2010-11-21"
    }
  ],
  "pageable": {
    "sort": {
      "unsorted": true,
      "sorted": false,
      "empty": true
    },
    "offset": 0,
    "pageSize": 10,
    "pageNumber": 0,
    "paged": true,
    "unpaged": false
  },
  "last": false,
  "totalPages": 853,
  "totalElements": 8522,
  "sort": {
    "unsorted": true,
    "sorted": false,
    "empty": true
  },
  "number": 0,
  "size": 10,
  "numberOfElements": 10,
  "first": true,
  "empty": false
}

1 Ответ

0 голосов
/ 25 февраля 2020

Вы наверняка должны будете создать свой собственный компонент-обертку, чтобы адаптировать таблицу материалов / нумератор страниц к вашим потребностям. Это просто не работа фреймворка для обработки любого входящего формата данных, например Spring. Может быть, есть пакет npm, который уже делает это, но каркас материала angular определенно не сделает это без какой-либо обертки.

Редактировать: Это, очевидно, будет иметь место, если вы не хотите пагинация на вашем бэкэнде. Если вы получите весь список, проблем быть не должно.

...