Question

我刚开始在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>

`

Answer 1

我刚刚对此进行了测试（将方法替换为静态值），并且对我来说效果很好。

您可以尝试以下吗？

删除getLabel方法？还是在这里给我看？
删除CSS并尝试。
粘贴HTML和TS关联文件供我查看。
粘贴您的AppModule以确保导入正确。
粘贴您的styles.scss文件，以确保正确导入@ angular / material主题。

其中之一应该解决您的成功之道。

Answer 2

我也遇到了同样的问题，即网格无法显示或在屏幕上很小。

如果您仔细阅读文档，实际上是根据材料设计规范https://material.io/design/components/image-lists.html为图像制作网格的。

如果您检查网格的元素，您会看到它会创建图形标签。我不完全确定这是否真的是它的真正用法，并且Figure标记是否会影响任何东西，但我建议您使用其他方法（例如Angular flex布局），并选择flexbox或CSS网格。

Answer 3

将此添加到您的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；在这种情况下，网格布局将无法正确呈现。

mat-grid-list无法正确呈现

3 个答案: