Javascript 在Angular中实现Gridstack 3

我在跟踪，试图用角度来实现它

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

代码呢

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模板

如果您使用的是

ngfor

，则需要查看步骤3，并在主div

$（'.grid stack'）.gridstack（）上调用它

您必须
安装
：


您必须
将其导入角度组件2A或2B（用于HTML）：



2A对于您的答案
Typescript
如下：

现在应该有
gridstack-h5.js


2B对于希望在
HTML
中执行此操作的其他人，可选，如：





你的HTML模板是什么样的

？我有，没有任何区别？我被迫使用jQuery？Gridstack 3的想法是消除依赖性如果你看我的帖子，你会在步骤4中看到三个选项这是本机的，但也是非常新的
import'Gridstack/dist/h5/Gridstack dd native'。因此，为了测试，我会尝试另外两个导入，一次一个。同时Gridstack是JQuery自由的，请查看您是否使用我在步骤4I中提到的选项。我不明白为什么脚本属性必须引用JQuery。问题是关于没有jquery的实现。您能免费提供一个jquery示例吗？
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);
}

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

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

  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
    }