在 mat-grid-list (Angular 6) 中设置单个图块的 rowHeight答案

【问题标题】：Setting the rowHeight of a single tile in mat-grid-list (Angular 6)在 mat-grid-list (Angular 6) 中设置单个图块的 rowHeight
【发布时间】：2018-07-04 19:21:54
【问题描述】：

我有一个 mat-grid-list，其中包含 n 个 mat-card 项目。在网格的底部，我想添加我自己的位于页面中心的自定义分页器（出于各种原因，如果可能的话，我不想使用mat-paginator）。

我尝试简单地在mat-grid-list 元素下方添加一个<div> 元素并将边距设置为0 auto;（这是我通常将div 居中的做法）但这似乎不是工作（分页器仍然顽固地左对齐）。

我可以向出现在所有其他图块之后的mat-grid-list 添加一个新图块，并将其[colspan] 设置为等于列数。当我这样做时，我得到了一个完美居中的分页器，除了有大量多余的高度（大概是因为它使用了其他相当大的 mat-grid-tile 项目的高度）。

有没有办法：a）让分页器在自己的div 中居中对齐或b）更改单个mat-grid-tile 的rowHeight，这样我就不会得到一个荒谬的数量分页器周围的空白区域？标记如下：

mat-grid-list 与div 中的分页器

<div *ngIf="dataModel" class="container page-content">
  <mat-grid-list cols="5">
    <mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
      <mat-card >
        <mat-card-header>
          <mat-card-title>{{ page.title }}</mat-card-title>
        </mat-card-header>
        <img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
        <mat-card-content>
          {{ page.matches }}
        </mat-card-content>
        <mat-card-actions>
          <button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
  <div class="paginator">
    <button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
      <mat-icon aria-label="Previous">navigate_before</mat-icon>
    </button>
    <ng-container *ngFor="let item of this.getPageArray(); let i = index;">
      <button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
    </ng-container>
    <button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
      <mat-icon aria-label="Next">navigate_next</mat-icon>
    </button>
  </div>
</div>

.paginator 类的 CSS

.paginator {
  margin: 0 auto;
  padding-top: 20px;
}

（注意：我也尝试将display 设置为inline-block 并将width 设置为100%，但均未成功）。

mat-grid-list with paginator in a separatemat-grid-tile`

<div *ngIf="dataModel" class="container page-content">
  <mat-grid-list cols="5">
    <mat-grid-tile *ngFor="let page of dataModel.pages" [colspan]="1" [rowspan]="1">
      <mat-card >
        <mat-card-header>
          <mat-card-title>{{ page.title }}</mat-card-title>
        </mat-card-header>
        <img mat-card-image src="{{ this.imageBase + page.id.trim() + '.jpg' }}" alt="Photo of page" />
        <mat-card-content>
          {{ page.matches }}
        </mat-card-content>
        <mat-card-actions>
          <button mat-button routerLink="{{ '/page/' + page.id.trim() }}">VIEW</button>
        </mat-card-actions>
      </mat-card>
    </mat-grid-tile>
    <mat-grid-tile [colspan]="5">
      <button mat-icon-button [disabled]="this.currentIndex == 1" (click)="onNavClick(this.currentIndex - 1)" >
        <mat-icon aria-label="Previous">navigate_before</mat-icon>
      </button>
      <ng-container *ngFor="let item of this.getPageArray(); let i = index;">
        <button mat-mini-fab color="primary" (click)="onNavClick(i + 1)">{{ i + 1 }}</button>
      </ng-container>
      <button mat-icon-button [disabled]="this.currentIndex == this.dataModel.totalPageResults" (click)="onNavClick(this.currentIndex + 1)">
        <mat-icon aria-label="Next">navigate_next</mat-icon>
      </button>
    </mat-grid-tile>
  </mat-grid-list>
</div>

【问题讨论】：

标签： html css angular angular-material

【解决方案1】：

您可以尝试将单独磁贴的行跨度设置为，例如，0.5（或任何更适合的值）。我不确定它是否适用于这种语法，但它适用于我的情况，我在 mat-grid-list 上显式设置 rowHeight 并将 rows: .5 用于磁贴列表中的特定磁贴。

【讨论】：