Javascript angular2gridster 让它工作答案

【问题标题】：Javascript angular2gridster getting it to workJavascript angular2gridster 让它工作
【发布时间】：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,
  };
}

最后我运行了我的项目，控制台日志中没有错误，但视图中只有一个空白页。

我忘记了一些东西，为什么它不起作用？

【问题讨论】：

标签： javascript angular gridster

【解决方案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 属性设置为该值。

【讨论】：