Javascript angular2gridster 让它工作
Posted
技术标签:
【中文标题】Javascript angular2gridster 让它工作【英文标题】：Javascript angular2gridster getting it to work 【发布时间】：2018-04-06 07:05:15 【问题描述】：我正在尝试angular2gridster
所以我已经在一个新的 angular-cli 项目中安装了这个库。
接下来我将它添加到 app.component.html：
<gridster [options]="gridsterOptions" [draggableOptions]=" handlerClass: 'panel-heading' ">
<gridster-item *ngFor="let widget of widgets"
[(x)]="widget.x" [(y)]="widget.y" [(w)]="widget.w" [(h)]="widget.h">
<!--some content-->
</gridster-item>
</gridster>
最后，这是我的 app.component.ts：
import Component from '@angular/core';
@Component(
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
)
export class AppComponent
title = 'app';
widgets: Array<any> = [];
gridsterOptions =
lanes: 5,
direction: 'vertical',
dragAndDrop: true,
resizable: true,
useCSSTransforms: true,
;
最后我运行了我的项目，控制台日志中没有错误，但视图中只有一个空白页。
我忘记了一些东西，为什么它不起作用？
【问题讨论】：
【参考方案1】：gridster 组件没有设置它的容器元素的height 属性（在你的情况下，它应该是<body> 我想）。如果您不介意滚动网格，您可以简单地将其放置在具有100% 高度的<div> 中。但是，如果您不想在网格中滚动，那么您应该考虑执行以下操作：
<div #gridsterContainer [style.height.px]="gridHeight" (window:resize)="onResize(gridsterContainer.getBoundingClientRect())">
<gridster [options]="options">
<gridster-item [item]="item" *ngFor="let widget of widgets">
<!-- your widget here -->
</gridster-item>
</gridster>
</div>
onResize 方法应该根据你有多少小部件来计算父级的高度（你需要为此想出一个公式），然后将gridHeight 属性设置为该值。
【讨论】：
以上是关于Javascript angular2gridster 让它工作的主要内容，如果未能解决你的问题，请参考以下文章
javascript JavaScript isset（）等效： - JavaScript
JavaScript 使用JavaScript更改CSS（JavaScript）