mat-card在angular中如何使用素材分页？

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
    })
  }

}