Javascript 如何使用材料分页在角与垫卡？

我很好奇我将如何实现分页的方式，我有我的论坛主题设置。我在这里找到了几种不同的方法，但没有一种与我当前存储数据的方式相关。

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

从'@angular/material/paginator'导入{MatPaginator}；
导出类TopicsComponent实现OnInit，AfterViewInit{
表格：表格组；
主题：主题[]；
数学：数学=数学；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
建造师(
公共论坛服务：论坛服务，
公共数据服务：数据服务服务，
公共元服务：元，
公共标题服务：标题）{
}
恩戈尼尼特（）{
//对于第一页，只从getTopics（）中取一个值
this.forumService.getTopics（）.pipe（take（1））.subscribe（（主题：topics[]）=>{
this.topics=主题；
console.log（this.topics）；
});
this.titleService.setTitle（“论坛|新世界中心”）；
this.metaService.updateTag（{name:'description'，content:'guidesforeveryaspectofamazonsgamenewworld'}）；
}
//viewChild装饰器仅在ngAfterViewInit方法中返回
ngAfterViewInit（）{
this.paginator.page.pipe(
开关映射（（）=>{
//对当前页面大小和页面索引执行任何操作
const pageIndex=this.paginator.pageIndex
const pageSize=this.paginator.pageSize
//使用当前页面索引对您的服务运行getTopics（）（确保您的函数支持它）
返回此.getTopics（{page:pageIndex}）
})
).订阅（（主题）=>{
this.topics=主题
})
}
}

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

从'@angular/material/paginator'导入{MatPaginator}；
导出类TopicsComponent实现OnInit，AfterViewInit{
表格：表格组；
主题：主题[]；
数学：数学=数学；
@ViewChild（MatPaginator，{static:true}）paginator:MatPaginator；
建造师(
公共论坛服务：论坛服务，
公共数据服务：数据服务服务，
公共元服务：元，
公共标题服务：标题）{
}
恩戈尼尼特（）{
//对于第一页，只从getTopics（）中取一个值
this.forumService.getTopics（）.pipe（take（1））.subscribe（（主题：topics[]）=>{
this.topics=主题；
console.log（this.topics）；
});
this.titleService.setTitle（“论坛|新世界中心”）；
this.metaService.updateTag（{name:'description'，content:'guidesforeveryaspectofamazonsgamenewworld'}）；
}
//viewChild装饰器仅在ngAfterViewInit方法中返回
ngAfterViewInit（）{
this.paginator.page.pipe(
开关映射（（）=>{
//对当前页面大小和页面索引执行任何操作
const pageIndex=this.paginator.pageIndex
const pageSize=this.paginator.pageSize
//使用当前页面索引对您的服务运行getTopics（）（确保您的函数支持它）
返回此.getTopics（{page:pageIndex}）
})
).订阅（（主题）=>{
this.topics=主题
})
}
}

你能分享stackblitz的工作演示吗？你能分享stackblitz的工作演示吗？

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

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

}