angular 5，gridster 具有不同的组件

Question

我正在使用 angular 5 和最新材料，并试图让 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 的数量。

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

Answer 1

快速浏览 gridster github repo 中的代码，我相信 cols 和 rows 用于对象大小/表示。 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>