Таблица Paginator не работает, как ожидалось

Question

Я получаю данные с сервера, данные поступают хорошо и отображаются на дисплее, но пагинатор не работает, хотя он только показывает.

На странице отображается страница, но она не работает. в качестве следующей кнопки: go на страницу и т.д. c.

<div class="container">
  <div class="row">
    <div class="col my-3">
      <div class="mat-elevation-z8">
        <app-message></app-message>

        <table mat-table [dataSource]="dataSource">



          <!-- Position Column -->
          <ng-container matColumnDef="name">
            <th mat-header-cell *matHeaderCellDef> Name </th>
            <td mat-cell *matCellDef="let element"> {{element.name}}</td>
          </ng-container>

           <!-- Position Column -->
           <ng-container matColumnDef="phone">
            <th mat-header-cell *matHeaderCellDef> Phone </th>
            <td mat-cell *matCellDef="let element"> {{element.phone}}</td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
        </table>

        <mat-paginator   [pageSizeOptions]="[5, 10, 20]" showFirstLastButtons></mat-paginator>
      </div>
    </div>
  </div>
</div>

Это код TS.

 export class UsersComponent implements OnInit {
  displayedColumns: string[] = ['name', 'phone'];

  dataSource = new MatTableDataSource<PeriodicElement>([]);

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  constructor(public data: DataService, private rest: RestApiService) {}
   ngOnInit() {
   this.getUsers();
   this.dataSource.paginator = this.paginator;
  }

  async getUsers(){
    try {

      const data =await this.rest.get("http://localhost:3030/user/auth/all/users");
      if(data['status']) {
        console.log(data['data']);

        this.dataSource = data['data'];

      } else {
        this.data.error(data['message']);
      }
    } catch (error) {
      this.data.error(error['message']);
    }
  }

}


interface PeriodicElement {
  slno:number,
  name: string,
  phone: string
}

const dataArray: PeriodicElement[] = [];

Answer 1

Можете ли вы интегрировать AfterViewInit и вызвать его

ngAfterViewInit() {
      this.dataSource.paginator = this.paginator;
}

и изменить

this.dataSource = data['data'];

на

this.dataSource.data = data['data'];

Answer 2

Похоже, вы не добавили соответствующие модули таблиц и страниц в ваш app.module.ts

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {MatTableModule} from '@angular/material/table';
import {MatPaginatorModule} from '@angular/material/paginator';



import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';

@NgModule({
  imports:      [ BrowserModule, FormsModule, MatTableModule,MatPaginatorModule ],
  declarations: [ AppComponent, HelloComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

как ваш код не работал даже на stackblitz, поэтому я добавил фиктивные данные, чтобы показать вам пример. Вы можете найти стек стека здесь: https://stackblitz.com/edit/angular-tcgvnu

Answer 3

Убедитесь, что вы импортируете MatPaginator из @angular/material/paginator, а не @angular/material