Angular 带数据源的角度材质表：分页和过滤器不工作

我有以下具有数据源属性的角度材质表：

<div class="dim">
  <mat-form-field >
    <input matInput class="warn" (keyup)="applyFilter($event.target.value)" placeholder="Search">
    <mat-icon matSuffix>search</mat-icon>
  </mat-form-field>
</div>
<div class="mat-elevation-z2">
  <table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="unit_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>ID</th>
      <td class="alignTd" mat-header *matCellDef="let row">{{row.id}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_type">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Type</th>
      <td mat-header *matCellDef="let row">{{row.unit_type}}</td>
    </ng-container>

    <ng-container matColumnDef="location_id_auto">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Location</th>
      <td mat-header *matCellDef="let row">{{row.location}}</td>
    </ng-container>

    <ng-container matColumnDef="user_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>User</th>
      <td mat-header *matCellDef="let row">{{row.user}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_number_hh">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Number Of units</th>
      <td mat-header *matCellDef="let row">{{row.unit_number}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_status">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
      <td mat-header *matCellDef="let row">{{row.status}}</td>
    </ng-container>

    <ng-container matColumnDef="unit_date_added">
      <th mat-header-cell *matHeaderCellDef mat-sort-header>Date Added</th>
      <td mat-header *matCellDef="let row">{{row.date_added}}</td>
    </ng-container>
    <tr class="example-expanded-row" mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">

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

我正在获取数据并正常显示，但我有6条记录，而不是在第一页显示5条，在另一页显示1条，而是在第一页显示所有6行，并且过滤器根本不工作

下面是一个示例，您可以添加一个数据数组

我有以下错误：

错误类型错误：无法读取未定义的属性“paginator” 在RegistrationComponent.push../src/app/dashboard/registration/registration.component.ts.RegistrationComponent.ngonit （注册.组成部分ts:20）

---

数据源类型必须是MatTableDataSource

你这样声明,

dataSource = new MatTableDataSource();

---

您的函数

getUnitData（）

是异步的，在访问

this.dataSource

时不会立即完成。将函数更改为此

getUnitData() {
    this.auth.getUnitDataService().subscribe(
      (data) => {
        this.dataSource = new MatTableDataSource(data);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
      },
      (error) => {
        console.log("Error: "+error)
      });
}

还要调整你的html

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

在html绑定分页器中

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

---

筛选器正在工作，但分页仍然错误。竖起大拇指：-）筛选器正在工作，但分页仍然错误。这根本不是问题所在。material网站上的示例也没有这样定义。@aslami-与我共享链接。。他们没有将数据源声明为MatTableDataSource@aslami-另创建一个示例，其中仅将datasource声明为any并在ngOnInit（）上访问paginator，然后告诉我是否可以从datasource访问paginator。@AniketAvhad此处：

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

  dataSource = new MatTableDataSource<any>();

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