如何将数据表组件的组件固定在顶部,并将Paginator固定在底部?
这是我的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-header-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'
;
原文地址:https://www.jb51.cc/angularjs/140878.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。