angular - 如何在Angular Material中删除mat-pagination和mat-table之间的空格？

Question

我有一个带有 Material Design 的 Angular 应用程序，我在其中使用来自 Angular Material lib 的分页组件。没有应用额外的样式。

在屏幕上，您可以看到表格和分页之间存在间隙。我怎样才能摆脱它？例如，当我选择用户数量 5 时，差距就消失了。

我使用了 style="margin-top: -1px"，但也许有更好的方法？

也许有一个选项在 mat-table 中包含 mat-paginator ？

HTML

<mat-table [dataSource]="data" [class.mat-elevation-z2]="true" style="overflow: hidden;">

  <ng-container matColumnDef="name">
    <mat-header-cell *matHeaderCellDef>Nombres</mat-header-cell>
    <mat-cell *matCellDef="let element">
        <a (click)="redirectToUser(element.userId)">
            {{element.names}}
        </a>
    </mat-cell> 
  </ng-container>

  <ng-container matColumnDef="rol">
    <mat-header-cell *matHeaderCellDef>Rol</mat-header-cell>
    <mat-cell *matCellDef="let element"> {{element.rolDTO.name}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="username">
    <mat-header-cell *matHeaderCellDef>Nombre del usuario</mat-header-cell>
    <mat-cell *matCellDef="let element">{{element.username}} </mat-cell>
  </ng-container>

  <ng-container matColumnDef="status">
      <mat-header-cell *matHeaderCellDef class="cent">Estado</mat-header-cell>
      <mat-cell *matCellDef="let element" class="cent">
        <mat-icon *ngIf="element?.rolDTO?.status === 'A'" style="color: rgb(44, 136, 79)">check_circle_outline</mat-icon>
        <mat-icon *ngIf="element?.rolDTO?.status === 'I'" style="color: rgb(168, 25, 25)">highlight_off</mat-icon>
      </mat-cell>
  </ng-container>

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


</mat-table>
<mat-paginator
style="overflow: hidden;"
[class.mat-elevation-z2]="true"
[showFirstLastButtons]="true"
(page)=               "paginate($event)"
[length]=             "pageConf.totalItems"
[pageSizeOptions]=    "pageConf.pageSize"
[pageSize]=           "pageConf.elementsPerPage"
</mat-paginator>

标签： angularangular-material