Question

我正在从服务器中获取数据，数据运行良好并显示在中，但分页器虽然仅显示，但仍无法正常工作。

分页器显示的是网页，但不能用作下一步按钮，转到页面等。

<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

确保从MatPaginator而非@angular/material/paginator导入@angular/material

Answer 3

似乎您没有在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

表分页器无法正常工作

3 个答案: