有人可以告诉我为什么“每页项目”数字显示在表格下方而不是选择选项元素(橙色标记)下?
这是我的 html 模板。
<div class="container">
<div class="row">
<div class="col-md-12">
<div>
<h3>MyTable</h3>
<div class="table-responsive">
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8" width="100%">
<!-- Index Column -->
<ng-container matColumnDef="index">
<th mat-header-cell *matHeaderCellDef> x </th>
<td mat-cell *matCellDef="let element; let i = index;">{{ (i+1) + (paginator.pageIndex * paginator.pageSize)}}</td>
</ng-container>
<ng-container matColumnDef="x1">
<th mat-header-cell *matHeaderCellDef> x1 </th>
<td mat-cell *matCellDef="let element"> {{element.x1}} </td>
</ng-container>
<ng-container matColumnDef="x2">
<th mat-header-cell *matHeaderCellDef> x2</th>
<td mat-cell *matCellDef="let element"> {{element.x2}} </td>
</ng-container>
....
....
....
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row
*matRowDef="let reading; columns: displayedColumns;"
(click) = "onRowClicked(reading)"
></tr>
</table>
</div>
<mat-paginator #paginator
[length]="countX"
[pageSize]="pageSize"
[pageSizeOptions]="pageSizeOptions"
aria-label="Choose page"
showFirstLastButtons>
</mat-paginator>
</div>
</div>
</div>
就像@D A 在评论中所说: 我必须在 angular.json 中添加 css
[“./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”, 添加到你的角度 json 中?