Angular Material中mat-grid-list创建后页面无显示问题求助

你代码里的核心问题是误用了Angular Material组件的实现形式：

• Angular Material的mat-grid-list是专属组件标签，不是通过普通<div>加class就能触发的，必须使用<mat-grid-list>和<mat-grid-tile>标签，Angular才能识别并渲染对应的网格布局。
• 第二个tile里设置了grid-column: span 0; grid-row: span 0，这会直接让元素隐藏，因为span值为0不会占据任何网格空间。

修正后的代码 #

<mat-grid-list cols="4" rowHeight="100px">
  <mat-grid-tile style="background-color: lightpink;" colspan="1" rowspan="2">
    Three
  </mat-grid-tile>

  <mat-grid-tile style="background-color: lightgreen;" colspan="1" rowspan="1">
    Two
  </mat-grid-tile>

  <mat-grid-tile style="background-color: #DDBDF1;" colspan="3" rowspan="1">
    Four
  </mat-grid-tile>
</mat-grid-list>

额外确认点 #

确保你的模块中已经导入了MatGridListModule：

import { MatGridListModule } from '@angular/material/grid-list';

@NgModule({
  imports: [
    // ...其他模块
    MatGridListModule
  ]
})
export class YourModule { }

内容的提问来源于stack exchange，提问作者547n00n