Question

我有一个使用Gridster2的网格，该网格从物料侧边栏的一个项目导航。侧边栏已打开，但是，每当我切换侧边栏（隐藏它）时，Gridster都会在我强制刷新之前不会调整项目的大小。有什么办法可以使其“自动”刷新？

要复制它，只需转到https://tiberiuzuld.github.io/angular-gridster2/并检查元素并删除<mat-nav-list class="mat-nav-list mat-list-base" role="navigation">及其内容。更改网格类型之前，不会全屏显示。

参考：https://github.com/tiberiuzuld/angular-gridster2/tree/master/src/app/sections/api

Answer 1

仅在调整窗口大小时，网格才会自动调整大小。在触发resize事件之前，无法跟踪容器大小的变化。

您需要在需要的地方触发调整大小事件。

this.options.api.resize()

请参阅api文档。

Answer 2

我通过以下两个步骤解决了该问题：

步骤1：：将[ngStyle]添加到<gridster>。它为grid-items添加了响应性：

<gridster [options]="options" [ngStyle]="{'width': toggled ? '100%' : 'auto'}">
   <gridster-item [item]="item" *ngFor="let item of dashboard">
      <!-- your content here -->
   </gridster-item>
</gridster>

其中toggled是一个布尔值，表示侧栏是否切换。初始值为false。

第2步：：为了强制项目内容（在我的情况下为图表）在网格项目中变得敏感，我使用了以下代码：

itemInitCallback: ((item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
    window.dispatchEvent(new Event('resize'));  // to reisize respective charts 
})

itemInitCallback是gridEvent

angular-gridster2

切换材质侧栏时，Gridster2网格不调整项目大小

2 个答案: