номер страницы перемещается в левую часть страницы при нажатии элементов на странице

Question

Я использую разбиение на страницы в своем мат-столе. В разбивке по страницам отображается количество страниц, но номера страниц перемещаются в левую часть страницы, а не внутри раскрывающегося списка:

Ниже приведен снимок экрана

, когда я нажимаю «Элементов на странице»; только 5 дисплеев внутри коробки. Остальная часть номера страницы переместится влево, как вы можете видеть в test1. Ниже мой код HTML:

<div>
 <mat-paginator #paginator [pageSizeOptions]="[5,10,25,100]" [pageSize]="5"></mat-paginator>
</div>

ниже мой код .ts:

export class PersonDataComponent implements OnInit {

  @ViewChild(MatPaginator, {static: false}) paginator: MatPaginator;

    ngOnInit() {
    this.LoadProjectData();
    this.listData = new MatTableDataSource(this.personlist);
  }


   LoadProjectData() {

    this.service.getProjectData().subscribe((tempdate) => {
      this.personlist = tempdate;
      console.log(this.personlist);
      if (this.personlist.length > 0) {
        this.dataavailable = true;
        this.listData = new MatTableDataSource(this.personlist);
        this.listData.sort = this.sort;
        this.listData.paginator= this.paginator;

      } else {
        this.dataavailable = false;
      }

     }), err => {
        console.log(err);
      };
  }

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

Answer 1

Моя angular Тема материала не была включена, и это приводило к смещению номеров страниц влево. Я включил тему материала, поместив ее в свой файл style.s css.

@import '@angular/material/prebuilt-themes/deeppurple-amber.css';