有没有办法在angular中为页面创建分页？

我无法为卡片列表创建角度分页

我添加了一些卡片，但我不知道如何制作带有分页的组件

  <!-- Grid column -->
  <div class="column-2 px-2 mb-r">

    <!--Card-->
    <div class="card default-color-dark">

      <!--Card image-->
      <div class="view">
        <img src="https://mdbootstrap.com/img/Photos/Slides/img%2810%29.jpg" class="card-img-top" alt="photo">
        <a href="#">
          <div class="mask rgba-white-slight"></div>
        </a>
      </div>

      <!--Card content-->
      <div class="card-body text-center">
        <!--Title-->
        <h4 class="card-title white-text">Title of the news</h4>
        <!--Text-->
        <p class="card-text white-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
          doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas.</p>
        <a href="#" class="btn btn-outline-white btn-md">Button</a>
      </div>

    </div>
    <!--/.Card-->

  </div>

---

检查角材料分页器组件

---

如果你想添加更多的动态内容，你必须将其添加到卡片列表项btnHref:中，并将其绑定到html{card.btnHref}

Hello，在从视图中移除的卡片中，它没有按照我的要求工作。我编辑了上面的代码，你可以看到我添加了paginator，但它没有从'@angular/material/paginator'导入{PageEvent}；或删除行=>pageEvent:pageEvent；我的天哪，我怎么把卡插入你的代码里？？我感到很困惑，请帮帮我，我真的是个初学者

  export class PaginatorConfigurableExample {
  length = 100;
  pageSize = 5;
  pageSizeOptions: number[] = [5, 10, 25, 100];
  cardsList = ['card 1', 'card 2','card 3', 'card 4','card 5', 'card 6','card 7', 'card 8','card 9', 'card 10','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2','card 1', 'card 2'];

  filterdCards = this.cardsList.slice(0,this.pageSize);
  pageEvent: PageEvent;
  updateCards(e){
    console.log(e);
    this.filterdCards = this.cardsList.slice( e.pageIndex * e.pageSize, (e.pageIndex +1) * e.pageSize);
    console.log(this.filterdCards);
  }
}




<mat-card *ngFor="let card of filterdCards">{{card}}</mat-card>

<mat-paginator [length]="cardsList.length"
              [pageSize]="pageSize"
              [pageSizeOptions]="pageSizeOptions"
              (page)="pageEvent = updateCards($event)">
</mat-paginator>

cardsList = [{
    imgUrl: 'https://mdbootstrap.com/img/Photos/Slides/img%2810%29.jpg',
    title: "Title of the news", body: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
          doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas.` },
  {
    imgUrl: 'https://mdbootstrap.com/img/Photos/Slides/img%2810%29.jpg',
    title: "Title of the news", body: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
          doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas.` },
  {
    imgUrl: 'https://mdbootstrap.com/img/Photos/Slides/img%2810%29.jpg',
    title: "Title of the news", body: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
          doloremque laudantium, totam rem
          aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
          Nemo enim ipsam voluptatem quia voluptas.` }];



        <div class="card default-color-dark"  *ngFor="let card of filterdCards">

          <!--Card image-->
          <div class="view">
            <img [src]="card.imgUrl" class="card-img-top" alt="photo">
            <a href="#">
              <div class="mask rgba-white-slight"></div>
            </a>
          </div>

          <!--Card content-->
          <div class="card-body text-center">
            <!--Title-->
            <h4 class="card-title white-text">{{card.title}}</h4>
            <!--Text-->
            <p class="card-text white-text">{{card.body}}</p>
            <a href="#" class="btn btn-outline-white btn-md">Button</a>
          </div>

        </div>