Нанесение нумерации страниц на мат-карту без таблицы - PullRequest
0 голосов
/ 10 декабря 2018

Я новичок в 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>

Я не знаю, как применять нумерацию страниц в этом сценарии.Я видел пример таблицы данных, но я хочу прояснить свою концепцию.Что я должен сделать, чтобы сделать нумерацию страниц на мат-карте.Пожалуйста, помогите мне с этой проблемой.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...