Question

我正在使用带有最新材料的角度5并尝试从https://github.com/tiberiuzuld/angular-gridster2

开始使用gridster

我的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>那么，我的网格如何在第一项中呈现第一个comp并在网格的第二项中呈现第二个comp？它不是我可以根据某个索引作为数组传递的图像列表。

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>

带有不同组件的格栅的角度5

1 个答案: