Angular 客户端角度分页

我正在从数据库中提取一个数据数组，并用一个简单的表显示它。我试图做的是向这个表中添加一个分页功能。例如，在每个页面中有5行。在这种情况下，courseData就是数组

<table  style="border-spacing: 5rem">
      <tr >
          <td style="font-size: 20px;">CRN</td>
          <pre> </pre>
          <td style = "font-size: 20px;" >Name</td>
          <pre> </pre>
          <td style ="font-size: 20px;" >Lecturer</td>
          <pre> </pre>
          <td style = "font-size: 20px;" >Level</td>
          <pre> </pre>
          <td style = "font-size: 20px;" >Days</td>
          <pre> </pre>
          <td style = "font-size: 20px;" >Time</td>



          </tr>
    <ng-container *ngFor="let data of courseData">
      <tr>
        <td style="text-decoration: underline;" (click)="crnClicked(data.crn)">{{data.crn}}</td>
        <pre> </pre>
        <td *ngIf="data.specialapp !=1" >{{data.name}}</td>
        <td style="font-weight: bold;"*ngIf="data.specialapp==1" >{{data.name}}</td>
        <pre> </pre>
        <td>{{data.lecturer}}</td>
        <pre> </pre>
        <td>{{data.level}}</td>
        <pre> </pre>
        <td>{{data.days}}</td>
        <pre> </pre>
        <td>{{data.hours}}</td>


        <button *ngIf="data.specialapp!=1" ion-button small  round (click)="addCrn(data.crn)" color="primary" block>+</button>

        </tr>

    </ng-container>
</table>

CRN
名称
讲师
水平仪
天
时间
{{data.crn}
{{data.name}
{{data.name}
{{data.讲师}
{{data.level}
{{data.days}
{{data.hours}
+

您可以使用模块。请试一试

---

到目前为止，您在分页方面取得了一些成就吗？不幸的是，我以前从未使用angular进行过分页：（顺便说一句，我可以看到angular（而不是AngularJS）DirectivesOrry，我编辑了它，谢谢我已经成功地进行了分页。您是否知道制作一个简单的搜索栏来过滤数据，比如说name属性？
<ng-container *ngFor="let data of courseData | paginate: { id: 'foo',
                                                  itemsPerPage: pageSize,
                                                  currentPage: p,
                                                  totalItems: total>

</ng-container>

import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {NgxPaginationModule} from 'ngx-pagination'; // <-- import the module
import {MyComponent} from './my.component';

@NgModule({
    imports: [BrowserModule, NgxPaginationModule], // <-- include it in your app module
    declarations: [MyComponent],
    bootstrap: [MyComponent]
})
export class MyAppModule {}

import {Component} from '@angular/core';

@Component({
    selector: 'my-component',
    template: `
    <ul>
      <li *ngFor="let item of collection | paginate: { itemsPerPage: 10, currentPage: p }"> ... </li>
    </ul>

    <pagination-controls (pageChange)="p = $event"></pagination-controls>
    `
})
export class MyComponent {
    p: number = 1;
    collection: any[] = someArrayOfThings;  
}