将 Angular Mat Paginator 与后端 API JSON 绑定

Question

在我的应用程序中，我有一个 Spring REST 控制器，它以 JSON 格式公开数据，这些数据已经以分页格式提供；在我的 Angular 前端，我已经声明了一个 mat-paginator 组件来获取来自后端的传入数据，但是，就我到目前为止所理解的而言，mat-paginator 自己处理页面格式（例如，如果我声明一个包含 20 个模拟元素的数组并将 mat-paginator 页面设置为 10 个元素，Angular 提供将页数处理为 '2' 的值），但我想让这个东西与后端已经提供的页面兼容即使在前端也无需自定义格式。有可能这样做吗？或者我是否需要以未分页格式传递整个元素列表才能直接在前端制作页面？这是后端页面结果的代码：

{
  "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
}

Answer 1

很确定您必须创建自己的包装器组件以使材料表/分页器适应您的需求。它根本不是框架的工作来处理任何传入的数据格式，例如春天。也许已经有一个 npm 包已经在这样做了，但是 angular material 框架肯定不会在没有任何包装的情况下这样做。

编辑：显然，只有在您不想在后端分页时才会出现这种情况。如果您获取整个列表，则应该没有任何问题。