问题标签 [angular-gridster2]

在过去的两天里，我一直在使用Angular Gridster来帮助创建一个“站点构建器”工具。站点构建器工具的要求之一包括允许工作区中的组件自由移动。我已经设法通过 Angular Gridster 满足了这个要求。但是，我在更新 gridsterItems 以适应“网格单元的动态高度”时遇到了一些困难。

我花了一些时间阅读包，结果发现这是因为 gridsterItems 必须完全填充一个或多个网格单元，所有列必须具有相同的宽度，并且所有行必须具有相同的高度。

想象一个场景，您有两个 gridsterItem，一个内容大小为 200 像素 x 200 像素，一个内容大小为 181 像素 x 181 像素。现在这两个 gridsterItem 不可能彼此相邻，除非每行和每列的高度/宽度为 1 像素（因为 181 是质数，并且与 200 没有公分母）。

上述情况是有道理的，但我是在组件的宽度始终相同而高度会变化的环境中操作的。我不需要 gridsterItems 彼此相邻。它们将在彼此上方/下方。

我正在尝试实现功能以允许自己实现这一点，但我陷入了困境。我的 gridsterItems 似乎只符合单个高度，并且没有“继承”底层组件的真实大小。知道如何解决这个问题吗？

我的代码如下：

我在这里包含了一个 Stackblitz：https ://stackblitz.com/edit/gridster-in-angular-di3ky5

共享预览：https ://gridster-in-angular-di3ky5.stackblitz.io 。

我有一个使用 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

我正在使用 angular 8、Highcharts 和 angular-gridster2 来拖动选择调整网格大小。当我调整小部件的大小时，子组件（在我的情况下为 Highcharts 图表）直到用户调整屏幕大小（浏览器窗口）后才会调整大小。我在 Highcharts 选项中添加了所有可能的选项来获取它，使用（外部）窗口调整大小来调整大小。有什么我遗漏的东西，我应该用什么来解决这个问题？感谢

我是 angular gridster 2 的新手

如果我们能够使用 angular gridster 2 显示已经开发的图表，请告诉我，我也希望看到相同的方法。因为我的 UI 有 5 个不同的 div 块，并且在里面每个 div 块中都显示了一张卡片..

加载页面后，如何使用 angular gridster 显示这 5 张具有可拖动和可调整大小功能的卡片。

请解释行、列、x 和 y 代表什么。如果这些值发生更改，它将如何影响 UI。

我正在使用 angular-gridster2 显示网格，我希望它缩小列数并在用户旋转屏幕时尝试最适合的重新布局。我可以更新 maxCols 并减小小部件的大小，但它似乎没有响应，这不是库的常见用途吗？有没有其他选择？

我想在 angular 8 中使用 angular-gridster2 创建多个仪表板。我有多个标签，每个标签中都有 gridster。我面临多个标签的这些问题。

• 假设 tab1 gridster 有 3 个项目，而 tab2 gridster 有 2 个项目，当我从 tab1 移动到 tab2 时，我最初位于第一个选项卡，当我在 tab2 的 gridster 中再添加一个项目时，它没有显示 gridster 中的任何项目，然后我会tab2的gridster的所有3项。
• 更新选项的显示网格属性仅更新最后一个网格项目。我想将相同的选项属性应用于沿多个选项卡存在的所有网格。

您可以在此处查看沿多个选项卡的 gridster

这是代码：

app.component.html

app.component.ts

子组件 line.component.ts

这里的问题是在添加新数据之后，当我单击取消然后当我尝试单击编辑按钮时，它会自动附加新数据。相反，仪表板数组将为空。

这是代码和输出：https ://stackblitz.com/edit/angular-rc7bbz?file=src%2Fapp%2Fapp.component.ts

注意：添加数据后，单击取消然后单击编辑按钮。

假设有一个现有数据

然后添加一个“Area2”数据应该是这样的。

然后当它单击取消按钮并单击编辑按钮时，它应该是这样的：

版本：^9.3.3

HTML

TS

我在这里要做的是多选网格。但问题是点击不起作用。当我单击空单元格时，它不会在 devtool 中显示控制台。

例如，我单击空单元格，它应该显示控制台，或者当我单击多项选择时，例如第一项和第二项为空，然后我将选择第一项和第二项，然后当我单击添加时，它将从第一项添加，然后第二项就是这样。

至

这是代码和输出：https ://stackblitz.com/edit/d3-angular-gridster2-working-axhc7u?file=src%2Fapp%2Fgrid%2Fgrid.component.html

网格 HTML

网格-TS

我在这里要做的是启用enableEmptyCellDrag. 例如，我单击按钮编辑，然后编辑的值为true，然后的值为enableEmptyCellDrag真。

我已经尝试过了：

我已经实现了 angular-gridster2 来保存几个小部件。它们都工作正常并且在浏览器中显示时就位。但是当在移动视图中使用相同的视图时，它们会一个一个地堆叠在一起，只有一列这很好，但问题是项目的顺序是随机的。有没有一种可能的方法可以让小部件按照它们在 Web 视图中的从左到右的位置进行排序。

我正在使用的 gridster 的配置：