问题描述
我正在关注 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
}