如何将mat-menu内的mat-grid显示为响应式

Question

我有材质网格和菜单。我使用类似工具提示的 mat-menu，下面会有其他网格，每个网格都有这个 mat-menu。当用户单击它时，用户应该看到出现的框和里面的内容。我决定在内部使用 Mat-G​​rid，但它不像往常一样负责。由于用户的行为保护其位置，Mat-grid 是弹性和收缩的。这就是我想要的。但是这里的 mat-grid 并没有变得更小当您更改页面宽度时，大 mat-grid 会这样做。

StackBlitz 演示：https://stackblitz.com/edit/angular-material-bootstrap-css-zcjddn?file=src/app/app.component.html

当页面是原始大小时看起来不错（PC、笔记本电脑等）

这里存在下面的问题（平板电脑、手机等的宽度。不会像外面的网格一样变小）

]2

Answer 1

HTML:

    <mat-grid-list [cols]="breakpoint" rowHeight="2:0.5 (window:resize)="onResize($event)">
    <`enter code here`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>5</mat-grid-tile>
    <mat-grid-tile>6</mat-grid-tile>
    </mat-grid-list>

.ts 文件：

ngOnInit() {
this.breakpoint = (window.innerWidth <= 400) ? 1 : 6;
}

onResize(event) {
this.breakpoint = (event.target.innerWidth <= 400) ? 1 : 6;
}

Check Stackblitz demo here