Блог

Проблема

В настоящее время я внедряю <mat-table> с <mat-paginator> прикрепленным к нему. Единственная проблема заключается в том, что выпадающий список элементов на странице смещен влево. Для того, что кажется выходящим за рамки начальной загрузки 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>
  

Кажется, что некоторые css необходимы. Просто попробуйте включить в свой style.css или style.scss строку

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

Наконец-то я могу решить эту проблему = D Мы знаем, что какой-то css-код Angular перезаписал исходный css-код разбивки на страницы, который работает с cdk-overlay-container. Вот почему я попытался скопировать код из файла @angular/cdk/overlay-prebuilt.css в мой собственный 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, если вы хотите непрозрачную выборку dropbox, добавьте следующие строки в .cdk-overlay-pane

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

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

Вы импортировали модуль разбиения материалов на страницы? Если нет, то, пожалуйста, импортируйте и повторите попытку. Спасибо

В большинстве проектов, будь то на тему boostrap или material, обычно есть папка theme, в которой будут файлы типа theme-variable.scss и theme.scss для проектов Bootstrap, в то время как в проектах material вы найдете material-theme.css or material-theme.scss .

Последние два файла очень важны для правильного отображения компонентов angular-material, даже после импорта модулей, отвечающих за компонент, вам понадобятся файлы, упомянутые выше.

Убедившись, что у вас есть эти два файла, вы хотите импортировать их в свой styles.css файл с помощью этой строки: @import './theme/material-theme.css';


После выполнения вышеуказанных шагов таблица или любой другой компонент angular-material будет отображаться правильно.