Javascript angular2gridster 让它工作

Question

所以我在新的 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,
  };
}

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

我忘记了什么，为什么它不起作用？

Answer 1

gridster 组件没有设置它的容器元素的 height 属性（在你的情况下，我想应该是 <body>）。如果您不介意在网格中滚动，只需将其放置在 <div> 高度 100% 中即可。但是，如果您不想在网格中滚动，那么您应该考虑这样做：

<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 angular2gridster getting it to work

javascript

gridster

angular