具有固定标题和Paginator的Angular 6材料数据表

这是我的HTML：

<div class="example-container mat-elevation-z8">

    <table mat-table #itemsTable [dataSource]="dataSource" class="items-list">

        <ng-container matColumnDef="position">
            <th mat-header-cell *matHeaderCellDef> No. </th>
            <td mat-cell *matCellDef="let element"> {{element.position}} </td>
        </ng-container>

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

        <ng-container matColumnDef="weight">
            <th mat-header-cell *matHeaderCellDef> Weight </th>
            <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
        </ng-container>

        <ng-container matColumnDef="symbol">
            <th mat-header-cell *matHeaderCellDef> Symbol </th>
            <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="this.componentsDataService.displayedColumns"></tr>
        <tr mat-row *matRowDef="let row; columns: this.componentsDataService.displayedColumns;" (click)="onRowClicked(row)"></tr>
    </table>

    <mat-paginator [pageSizeOptions]="[50,100,250]" showFirstLastButtons></mat-paginator>

</div>

我尝试将粘性添加到< tr mat-h??eader-row>来自文档,但它不起作用.

我的.ts文件中的导入：

import { Component,OnInit,OnChanges,Input,ViewChild } from '@angular/core';
 import { TabsDataService } from 'src/app/services/tabs-data.service';
 import { ComponentsDataService } from 'src/app/services/components-data.service';
 import { MatPaginator,MatTableDataSource,MatTable,MatTableModule } from '@angular/material'

;