时间戳

首页 > 解决方案 > mat-grid-list 无法正确呈现

angular - mat-grid-list 无法正确呈现

问题描述

我刚刚开始在 Angular v6 中使用 Angular Material。当我尝试在组件中显示公共字段的值时，它不会呈现在我的网页上。但是，如果我使用 Chrome DevTools 验证该元素是否存在，我可以看到生成了一个值，但网页没有显示它。

<mat-card>
  <mat-card-title>Basic grid list {{getLabel(22, 'Members')}}</mat-card-title>     <!-- This shows properly -->
  <mat-card-content class="demo-basic-list">
    <mat-grid-list cols="4" [rowHeight]="123">
      <mat-grid-tile> {{getLabel(22, 'Members')}} </mat-grid-tile>             <!-- This does NOT show properly -->
      <mat-grid-tile> Two </mat-grid-tile>
      <mat-grid-tile> Three </mat-grid-tile>
      <mat-grid-tile> Four </mat-grid-tile>
    </mat-grid-list>
  </mat-card-content>

`

标签： angularangular-material2

解决方案

将此添加到您的 css 文件中

.grid-layout-custom{
  width: 50vw;
  height: 50vh;
}

并将类引用添加到 html 文件

  <mat-grid-list cols="3" rowHeight="2:1" class="grid-layout-custom">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
  </mat-grid-list>

发生这种情况是因为默认高度和宽度为 0；在这种情况下，网格布局无法正确呈现。

推荐阅读