在 Angular 中实施 Gridstack 3

Question

我正在关注 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，而不是网格，而且没有任何错误。缺少什么？

Answer 1

请 post 你的 HTML 模板。

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

You must install:

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

You must import it into angular component 2A or 2B for HTML:

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"/>

What is your HTML template, like 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
    }

在 Angular 中实施 Gridstack 3

Implementing Gridstack 3 in Angular

javascript

gridstack

angular