将分页应用于不带桌子的席卡

Question

我刚好接触过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>

在这种情况下，我不知道如何应用分页。我已经看到了一个数据表的示例，但是我想阐明一下我的概念。要在分页卡上应用分页，我必须要做的是。请帮我解决这个问题。