如何在 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(&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public forumService: ForumService,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public dataService: DataserviceService,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public metaService: Meta,&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; public titleService: Title) {}&nbsp;ngOnInit() {//take just one value from the getTopics() for the first page&nbsp; &nbsp;this.forumService.getTopics().pipe(take(1)).subscribe((topics: Topics[]) => {&nbsp; &nbsp;this.topics = topics;&nbsp; &nbsp;console.log(this.topics);&nbsp; &nbsp;});&nbsp; &nbsp;this.titleService.setTitle("Forum | New World Hub");&nbsp; &nbsp;this.metaService.updateTag({ name: 'description', content: 'Guides for every aspect of Amazons game New World'});&nbsp;}//the viewChild decorator return only in the ngAfterViewInit method&nbsp; ngAfterViewInit(){&nbsp; &nbsp; this.paginator.page.pipe(&nbsp; &nbsp; &nbsp;switchMap(() => {&nbsp; &nbsp; &nbsp; &nbsp;// do whatever with the current page size and page index&nbsp; &nbsp; &nbsp; &nbsp;const pageIndex = this.paginator.pageIndex&nbsp; &nbsp; &nbsp; &nbsp;const pageSize = this.paginator.pageSize&nbsp; &nbsp; &nbsp; &nbsp;// run getTopics() to your service with the current page index(make sure your functions supports it)&nbsp; &nbsp; &nbsp; &nbsp;return this.getTopics({page: pageIndex})&nbsp; &nbsp; &nbsp;})&nbsp; &nbsp; ).subscribe((topics) => {&nbsp; &nbsp; &nbsp; this.topics = topics&nbsp; &nbsp; })&nbsp; }}