Я новичок в agnular 6 и хочу применить нумерацию страниц к мат-карточке.Я отображаю данные на мат-карте.поэтому ниже приведен мой код машинописного кода.
export class ViewComponent implements OnInit {
Questions: IQuestion[];
pageSize: 10;
pageLength: 100;
pageSizeOptions: number[] = [2, 5, 10, 25, 100];
@ViewChild(MatPaginator) paginator: MatPaginator;
constructor(private _service: QuestionServiceService) { }
observableData: Observable<any>;
questionSource = new QuestionDataSource(this._service, this.paginator);
ngOnInit() {
this.observableData = this.questionSource.connect();
// this._service.getQuestions().subscribe((data) => {this.Questions = data; console.log(this.Questions); });
}
}
export class QuestionDataSource extends DataSource<any> {
constructor(private _serv: QuestionServiceService, private _paginator: MatPaginator) {
super();
}
connect(): Observable<IQuestion[]> {
return this._serv.getQuestions();
}
disconnect() {}
}
, а это мой HTML-код.
<mat-card *ngFor="let question of observableData | async; let i = index" class="cardcs">
<mat-card-header>
<mat-card-title>
Question {{i+1}}
</mat-card-title>
<mat-card-subtitle>
{{question.subject}}
</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>
{{question.question}}
</p>
<p>Answer: {{question.answer}}</p>
<p>Option A: {{question.optionA}}</p>
<p>Option B: {{question.optionB}}</p>
<p>Option C: {{question.optionC}}</p>
<p>Option D: {{question.optionD}}</p>
<p>Selected Answer: {{question.key}}</p>
<mat-card-actions>
<button mat-raised-button>Edit</button>
<button mat-raised-button>Edit subject</button>
<button mat-raised-button>Delete</button>
</mat-card-actions>
</mat-card-content>
</mat-card>
<mat-paginator
[length]="pageLength"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
>
</mat-paginator>
Я не знаю, как применять нумерацию страниц в этом сценарии.Я видел пример таблицы данных, но я хочу прояснить свою концепцию.Что я должен сделать, чтобы сделать нумерацию страниц на мат-карте.Пожалуйста, помогите мне с этой проблемой.