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让它工作

1 个答案: