我在angular应用程序中使用ngb分页，但工作不正常

我在表格中的angular应用程序上应用了NGB分页，但它不起作用。它只是显示2页，而不是在表的页面之间划分数据。我的代码如下：

import { UserService } from './../services/user.service';
import { Component, OnInit } from '@angular/core';
import { UserInfo } from 'src/app/models/user-info';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent implements OnInit {

  constructor(private _userService:UserService) { }

  ngOnInit() {
    this.getUserData();

  }


userData=[
{"name":"Akash","email":"akash@gmmail.com"},
{"name":"sumit","email":"sumit@gmmail.com"},
{"name":"mohit","email":"mohit@gmmail.com"},
{"name":"rajesh","email":"rajesh@gmmail.com"},
{"name":"ramesh","email":"ramesh@gmmail.com"},
{"name":"vikas","email":"vikas@gmmail.com"},
{"name":"suresh","email":"suresh@gmmail.com"},
{"name":"ramesh","email":"ramesh@gmmail.com"},
];

elementPerpage:number=5;
currentPage:number=1;
arrayLength:number=this.userData.length;
  userInfo:UserInfo[];

这是我的Html文件

<h3>User Details</h3>
<div class="table-responsive">
    <table class="table table-striped ">
        <thead>
            <tr>
                <th scope="col">User Name</th>
                <th scope="col">User Email</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngIf="!userData || userData.length === 0">
                <td colspan="2" class="text-center">No records</td>
            </tr>
            <tr *ngFor="let info of userData">
                <td>
                    {{info.name}}
                </td>
                <td>
                   {{info.email}}
                </td>
            </tr>
        </tbody>
    </table>
</div>
<div >
    <ngb-pagination [collectionSize]="arrayLength" [(page)]="currentPage" [pageSize]="elementPerpage">
    </ngb-pagination>
</div>

用户详细信息
用户名
用户电子邮件
没有记录
{{info.name}
{{info.email}

我已经将引导添加到项目中，没有错误。但是分页不起作用。如何使ngb分页工作？

请查看。 基本用法示例：

<table>
  <tr *ngFor="let item of items | slice: (page-1) * pageSize : (page-1) * pageSize + pageSize">
    <!-- content here -->
  </tr>
</table>

<ngb-pagination
  [(page)]="page"
  [pageSize]="pageSize"
  [collectionSize]="items.length"></ngb-pagination>

---

*ngFor包含一个答案（：

你的答案是正确的，但是你能告诉我为什么我们在这里使用slice pipe，使用它的意义是什么吗？它从整个海量数据中剪切所选页面的数据。分页组件为开发人员提供了选择当前页面的UI。仅显示当前页面的数据仍然是开发的关键急诊室的责任。