Angular Material mat-paginator固定底部

下午好，

我很难使用DataTable来获得带有角度材质的固定分页器 . 我的意思是我只想滚动行 . 我已经检查了https://material.angular.io/components/table/examples没有成功 . 这是我的代码：

component.html

<mat-form-field class="table-form-input">
    <input type="text" matInput (keyup)="doFilter($event.target.value)" placeholder="Filter" >
  </mat-form-field>
<div class="table-container mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>

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

    <!-- Client id Column -->
    <ng-container matColumnDef="cli_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Client ID </th>
      <td mat-cell *matCellDef="let element"> {{element.cli_id}} </td>
    </ng-container>

     <!-- EXT id Column -->
     <ng-container matColumnDef="ext_id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> EXT ID </th>
      <td mat-cell *matCellDef="let element"> {{element.ext_id}} </td>
    </ng-container>

    <!-- Weight Column -->
    <ng-container matColumnDef="want_details">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Need details </th>
      <td mat-cell *matCellDef="let element" (click) = "rowClicked(element.ext_id)">
        <mat-radio-group>
          <mat-radio-button class="table-radio-button" *ngFor="let detail of detail_types" [value]="detail.id" [checked]= "detail.id === element.want_details">
            {{detail.name}}
          </mat-radio-button>
        </mat-radio-group> </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true;"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
  </table>
  <mat-paginator [pageSize]="25"[pageSizeOptions]="[5, 10, 25]" showFirstLastButtons></mat-paginator>
</div>

component.ts

import { Component, OnInit, OnDestroy, ViewChild, AfterViewInit} from '@angular/core';
import { MatSort, MatTableDataSource, MatPaginator } from '@angular/material';
import { Subscription } from 'rxjs';
import { HomeSupportService } from './home-support.service';

@Component({
  selector: 'app-home-support',
  templateUrl: './home-support.component.html',
  styleUrls: ['./home-support.component.css']
})
export class HomeSupportComponent implements OnInit, AfterViewInit, OnDestroy {

  public displayedColumns: string[] = ['name', 'cli_id', 'ext_id', 'want_details'];
  public list_client;
  private list_clientSub: Subscription;
  public dataSource = new MatTableDataSource(this.list_client);
  public detail_types = [{id: 0, name: 'No'}, {id: 1, name: 'Short'}, {id: 2, name: 'Long'}];

  @ViewChild(MatSort) sort: MatSort;
  @ViewChild(MatPaginator) paginator: MatPaginator;

  constructor(private homesupportservice: HomeSupportService) { }

  ngOnInit() {
    this.homesupportservice.getClientList();
    this.list_clientSub = this.homesupportservice.getClientListUpdatedSubject().subscribe(
      (list_client) => {
        this.list_client = list_client;
        this.dataSource.data = this.list_client;
      },
      (error) => {
        console.log(error);
      }
    );
    this.dataSource.paginator = this.paginator;
  }

  ngAfterViewInit() {
    this.dataSource.sort = this.sort;
    this.dataSource.filterPredicate = (data:
      {name: string, cli_id: number, ext_id: number, want_details: string}, filter: string) => data.name.indexOf(filter) !== -1;
  }

  ngOnDestroy() {
    this.list_clientSub.unsubscribe();
  }

  doFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }

  rowClicked(row: any): void {
    console.log(row);
  }
}

component.css

table {
    width: 100%;
  }

  th.mat-sort-header-sorted {
    color: black;
  }

  .table-container {
    margin: auto;
    width: 80%;
    max-height: 80%;
    overflow: auto;
  }

  .table-form-input{
    width: 80%;
    margin-left: 10%;
    margin-top: 20px;
  }

  .table-radio-button{
    padding-right: 5px;
    padding-left: 5px;
  }

我试图将溢出放在 table 上，但它不起作用 . 试过相对，绝对，固定等等......

如果有人有解决方案或文档，那将是完美的！

非常感谢