分页器选择行数未正确显示

问题描述 投票:0回答:1

我有一张像这样的有角材料的桌子

有人可以告诉我为什么“每页项目”数字显示在表格下方而不是选择选项元素(橙色标记)下?

这是我的 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>
angular html-table material-ui
1个回答
0
投票

就像@D A 在评论中所说: 我必须在 angular.json 中添加 css

[“./node_modules/@angular/material/prebuilt-themes/indigo-pink.css”, 添加到你的角度 json 中?

© www.soinside.com 2019 - 2024. All rights reserved.