在 Angular 中实现 Gridstack 3

如何解决在 Angular 中实现 Gridstack 3

我正在关注 this example，尝试在 Angular 中实现它。

我按如下方式导入（没有 jQuery 依赖项）：

import * as GridStack from 'gridstack/dist/gridstack-h5';

和代码

ngAfterViewInit() {
    
  var items = [
      {content: 'my first widget'},// will default to location (0,0) and 1x1
      {w: 2,content: 'another longer widget!'} // will be placed next at (1,0) and 2x1
   ];

    var grid = GridStack.init();
    grid.load(items);
}

但我看到的只是静态 div 而不是网格，并且没有错误。缺少什么？

解决方法

请发布您的 HTML 模板。

仔细检查 GridStack Read Me 中的配置，如果您使用的是 ngfor，那么您需要查看第 3 步并在您的主 div $('.grid-stack').gridstack();

您必须install：

yarn add gridstack
// or
npm install --save gridstack

对于 HTML，您必须将其 import 转换为角度组件 2A 或 2B：

2A对于您的回答Typescript，如下所示：

import 'gridstack/dist/gridstack.min.css';
import GridStack from 'gridstack';

你现在应该有 gridstack-h5.js gridstack native js version like here

2B 对于希望在 HTML optional 中执行此操作的其他人，如下所示：

<script src="node_modules/gridstack/dist/gridstack-h5.js"></script>

<link href="node_modules/gridstack/dist/gridstack.min.css" rel="stylesheet"/>

你的 HTML 模板是什么，比如 here

  ngAfterViewInit() {
        setTimeout(() => {
            $('.grid-stack').gridstack();
            this.gridStack = $('.grid-stack').data('gridstack');
        },300); //This MUST finish after dynamic data is retrieved for ngfor,and calling these statements in another area just doesn't work
    }