angular 5 gridster 具有不同的组件

Question

我正在使用 angular 5 和最新的 material 并试图让 gridster 从 https://github.com/tiberiuzuld/angular-gridster2

开始工作

我的 html 看起来像：

 <gridster [options]="options">
                        <gridster-item [item]="item" *ngFor="let item of dashboard">
                              <app-infolet-smart-alerts [ngClass]="(smartAlertState == false) ? 'dashboard-widget-1-2' : 'dashboard-widget-2-2'" 
                                                            (onClickedExpand)="smartAlertSize($event)">
                              </app-infolet-smart-alerts>

                        </gridster-item>
                  </gridster>

相关的.ts

ngOnInit() {

     this.options = {
       itemChangeCallback: DynamicHomeComponent.itemChange,
       itemResizeCallback: DynamicHomeComponent.itemResize,
       draggable: {
         enabled: true
       }
     };

     this.dashboard = [
       {cols: 1, rows: 1, y: 1, x: 1},
       {cols: 1, rows: 1, y: 1, x: 1}
     ];
  }

options: GridsterConfig;
dashboard: Array<GridsterItem>;

问题 1.这里的y和x是什么？假设 cols 和 rows 是单个项目将要占用的 12 个 col 的数量。

我喜欢不同的组件，因为它是一个仪表板。假设定义为 <app-comp1></app-comp1> 和 <app-comp2></app-comp2> 那么，我的网格将如何在第一个项目中呈现第一个组件，在第二个项目中呈现第二个组件？它不是我可以根据某些索引作为数组传递的图像列表。

Answer 1

快速浏览一下 gridster github 存储库中的代码，我相信 cols 和 rows 是针对对象 size/representation 的。 y 和 x 是对象将放置在网格中的轴。

<gridster [options]="options">
  <gridster-item [item]="{cols: 2, rows: 1, y: 0, x: 0}">
    <app-comp1></app-comp1>
  </gridster-item>
  <gridster-item [item]="{cols: 2, rows: 1, y: 3, x: 4}">
     <app-comp2></app-comp2>
  </gridster-item>                  
</gridster>

angular 5 gridster 具有不同的组件

angular 5 with gridster having different components

layout

gridster

angular-material2

angular

angular5