javascript - 在 gridstack.js（Angular 2+）中重置会保留 HTML 属性的旧值，从而在下次调整大小或拖动时导致问题

Question

我正在为我的 Angular 7 应用程序使用 gridstack.js v^4.2.5。我可以通过

在 GridstackDemoComponent.ts

grid: GridStack;
ngOnInit() {
        this.grid = GridStack.init();
}

并且在

    <div class="grid-stack">
      <div
        class="grid-stack-item"
        gs-id="grid-1"
        id="grid-1"
      >
      SOME DATA HERE/CHART COMPONENTS
      </div>
    </div>

我有 6 个这样的网格项目，用于 6 个不同的图表。这工作得很好。现在在调整大小或拖动其他地方后重置网格，我正在使用以下功能，

  resetChartConfig() {
    document.getElementById("grid-1").setAttribute("gs-min-w", "4");
    document.getElementById("grid-1").setAttribute("gs-min-h", "2");
    document.getElementById("grid-1").setAttribute("gs-x", "0");
    document.getElementById("grid-1").setAttribute("gs-y", "3");
    document.getElementById("grid-1").setAttribute("gs-w", "8");
    document.getElementById("grid-1").setAttribute("gs-h", "3");
    ...
  }

此重置功能按预期工作，但在此之后，当我尝试调整或拖动任何网格项目时，它会自动占用在重置为默认值之前设置的旧属性值。

例如。说

1. 第 1 步：grid-1 (item1) 我将大小调整为 gs-w = 12 , gs-h = 6 & 拖动位置到 gs-x = 3, gs-y = 3
2. 第2步：点击重置按钮重置为默认值。
3. 第 3 步：尝试调整或拖动 grid-2 (item2)。

此时，grid-1 将自动采用步骤 1 中的值。

不知何故，旧的 HTML 属性被保留在我无法清除的 DOM 中。

有什么方法可以实现这个功能吗？

我在这里先向您的帮助表示感谢。

标签： javascriptangulardomangular7gridstack