Question

问题

我当前正在实现一个<mat-table>并附加一个<mat-paginator>。唯一的问题是每页项目的下拉列表向左偏移。对于Bootstrap container之外的情况。

这是正在发生的事情的图像。您会看到下拉菜单的位置以及项目的位置是完全错误的。

代码

我的整个网站都在引导容器内，因此我的app.component.html基本上是这样的：

<app-header></app-header>
<div class="container mt-3">
  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

有问题的页面只是一个简单的材料表，在其底部添加了分页。

<div class="row">
  <div class="col-md-12">
    <mat-table *ngIf="items" [dataSource]="items" matSort>

      <!-- ID Column -->
      <ng-container matColumnDef="type">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Type </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.type}} </mat-cell>
      </ng-container>

      <!-- Provider Column -->
      <ng-container matColumnDef="provider">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Provider </mat-header-cell>
        <mat-cell *matCellDef="let row"> <a href="https://eosauthority.com/account/{{row.provider}}" target="_blank">{{row.provider}}</a> </mat-cell>
      </ng-container>

      <!-- Name Column -->
      <ng-container matColumnDef="url">
        <mat-header-cell *matHeaderCellDef mat-sort-header> URL </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.url}} </mat-cell>
      </ng-container>

      <!-- Color Column -->
      <ng-container matColumnDef="country">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Country </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.country}} - <span class="flag-icon flag-icon-{{row.country | lowercase}}"></span> </mat-cell>
      </ng-container>

      <!-- Color Column -->
      <ng-container matColumnDef="updated_on">
        <mat-header-cell *matHeaderCellDef mat-sort-header> Updated </mat-header-cell>
        <mat-cell *matCellDef="let row"> {{row.updated_on}} </mat-cell>
      </ng-container>

      <mat-header-row *matHeaderRowDef="['type', 'provider', 'url', 'country', 'updated_on']"></mat-header-row>
      <mat-row *matRowDef="let row; columns: ['type', 'provider', 'url', 'country', 'updated_on']">
      </mat-row>
    </mat-table>

    <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
  </div>
</div>

Answer 1

我终于可以解决这个问题= D我们知道，一些Angular的CSS代码会覆盖与 cdk-overlay-container 一起使用的分页的原始CSS代码。这就是为什么我尝试将代码从我自己的css文件中的文件 @ angular / cdk / overlay-prebuilt.css 中复制出来的原因。之后，我查看了我真正需要的组件，就是这样：

//Add this to your css/scss File
::ng-deep {
  .cdk-overlay-container,
  .cdk-global-overlay-wrapper {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
  .cdk-overlay-container {
    position: fixed;
    z-index: 1000;
  }

  .cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: 1000;
    display: flex;
    max-width: 100%;
    max-height: 100%;
  }
}

现在，如果要选择非透明的保管箱，则具有Angular的原始分页，将以下行添加到 .cdk-overlay-pane

background-color: white;
border: 1px solid rgba(128, 128, 128);

Answer 2

import { MatPaginatorModule } from '@angular/material/paginator';

您是否已导入材料分页模块？如果没有，请导入，然后重试。谢谢

Answer 3

似乎需要一些css。只需尝试在您的style.css或style.scss中添加该行

@import "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

Answer 4

在大多数项目中，无论是以boostrap为主题还是以材料为主题，通常都有一个主题文件夹，对于Bootstrap项目，您将拥有theme-variable.scss和theme.scss之类的文件，而在材料项目中，您会拥有找到material-theme.css或material-theme.scss。

最后两个文件对于正确渲染角材料组件非常重要，即使在导入负责该组件的模块之后，您仍需要上面提到的文件。

在确保拥有这两个文件之后，您需要使用以下行将它们导入styles.css文件中：@import './theme/material-theme.css';

执行上述步骤后，表格或任何角材料组件将正确呈现。

物料分页下拉列表不正确

问题

代码

4 个答案: