如何在 Angular 中使用 mat-card 的材质分页？

Question

<div class="main-div"> <mat-card class="main" *ngFor="let topics of topics">  <mat-card-content>   <div class="row">     <div class="column left">    <img class="responsive" src="https://newworldhub.com/api/assets/{{topics.profilePicture}}">    <p>{{topics.name}}</p>    <p>Posted {{Math.round(topics.dateDiff/1440)}}</p>  </div>  <div class="column middle text-in-tile">    <h1 routerLink="{{topics.topicId}}"        (click)="this.forumService.setPostToken(topics.topicId)">{{topics.topicSubject}}</h1>    <p class="content">{{topics.topicContent}}</p>  </div></div></mat-card-content></mat-card><mat-paginator [length]="100"             [pageSize]="1"             [pageSizeOptions]="[1, 10, 25, 100]"></mat-paginator></div>html^^export class TopicsComponent implements OnInit {form: FormGroup;topics: Topics[];Math: Math = Math;constructor(            public forumService: ForumService,             public dataService: DataserviceService,             public metaService: Meta,             public titleService: Title) {} ngOnInit() {   this.forumService.getTopics().subscribe((topics: Topics[]) => {   this.topics = topics;   console.log(this.topics);   });   this.titleService.setTitle("Forum | New World Hub");   this.metaService.updateTag({ name: 'description', content: 'Guides for every aspect of Amazons game New World'}); }}我很好奇如何通过设置论坛主题的方式来实现分页。我在这里找到了几种不同的方法，但它们都不适合我当前存储数据的方式。

Answer 1

您的 html 代码很好，然后在组件中声明 matPaginator 并订阅可观察的页面：

import { MatPaginator } from '@angular/material/paginator';

export class TopicsComponent implements OnInit, AfterViewInit {

form: FormGroup;

topics: Topics[];

Math: Math = Math;

@ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;

constructor(

            public forumService: ForumService, 

            public dataService: DataserviceService, 

            public metaService: Meta, 

            public titleService: Title) {

}

 ngOnInit() {

//take just one value from the getTopics() for the first page

   this.forumService.getTopics().pipe(take(1)).subscribe((topics: Topics[]) => {

   this.topics = topics;

   console.log(this.topics);

   });

   this.titleService.setTitle("Forum | New World Hub");

   this.metaService.updateTag({ name: 'description', content: 'Guides for every aspect of Amazons game New World'});

 }

//the viewChild decorator return only in the ngAfterViewInit method

  ngAfterViewInit(){

    this.paginator.page.pipe(

     switchMap(() => {

       // do whatever with the current page size and page index

       const pageIndex = this.paginator.pageIndex

       const pageSize = this.paginator.pageSize

       // run getTopics() to your service with the current page index(make sure your functions supports it)

       return this.getTopics({page: pageIndex})

     })

    ).subscribe((topics) => {

      this.topics = topics

    })

  }

}