javascript - 如何在 Angular Material 中嵌套网格列表？

Question

当我尝试以 Angular 嵌套网格时，内部网格消失了。
这是一个例子:
https://stackblitz.com/edit/angular-eib7wz

我尝试使用 column 属性，但仍然得到类似的结果，嵌套网格根本不显示。

我正在使用网格列表将我的页面分成小部分，并且在每个部分中我想放置一个不同的组件，其中一个组件是另一个较小的网格。

我愿意接受建议。感谢您的帮助。

Answer 1

网格在嵌套时会显示出来，只有大小为零...所以我们添加了一个 div 并设置它的样式...我故意放了 min-width:80% ...为了实现你的目标，你可能想把 min-width:100% :

添加以下相关 CSS :

.internalMatGrid{  border:1px solid red; min-width:80%;}

相关 HTML :

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile>
    <div class='internalMatGrid' >
      <mat-grid-list cols="2" rowHeight="2:1">
        <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-list>
    </div>
  </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-list>

您可以查看 working stackblitz here