<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'}); }}我很好奇如何通過設置論壇主題的方式來實現分頁。我在這里找到了幾種不同的方法，但它們都不適合我當前存儲數據的方式。
1 回答
ITMISS
TA貢獻1871條經驗 獲得超8個贊
您的 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
})
}
}
- 1 回答
- 0 關注
- 135 瀏覽
添加回答
舉報
0/150
提交
取消