2

我有如下的 gridster 项目并使用https://github.com/tiberiuzuld/angular-gridster2

  <gridster-item [item]="myAptInfolet" class="shadow">
                               <app-my-appointments-infolet></app-my-appointments-infolet>
                        </gridster-item>

.ts

this.myAptInfolet = {cols: 1, rows: 2, y: 0, x: 4}

调整大小功能就像

test(){
    this.myAptInfolet.cols = 2
    this.options.api.resize()

   }

但什么也没发生。控制台没有错误。请指教

4

3 回答 3

2

我是 angular-gridster2 的新手，但我设法对我的 gridster 的布局进行了一些动态更改，所以我会尽力帮助你。

我看不到你的“选项”属性来自哪里，但它应该是GridsterConfig的一个实例，所以你的 .ts 文件的开头应该是这样的：

import { GridsterConfig, GridsterItem }  from 'angular-gridster2';
   options: GridsterConfig;

定义选项后，您可以通过调用 api 的optionsChanged方法来刷新 gridster 的布局，如下所示：

test(){
    this.myAptInfolet.cols = 2;
    this.options.api.optionsChanged();
}

您可以参考angular-gridster2 github找到一个关于如何与项目进行动态交互并更改网格布局的非常小而干净的示例：

import { GridsterConfig, GridsterItem }  from 'angular-gridster2';
   options: GridsterConfig;
   dashboard: Array<GridsterItem>;

   static itemChange(item, itemComponent) {
     console.info('itemChanged', item, itemComponent);
   }

   static itemResize(item, itemComponent) {
     console.info('itemResized', item, itemComponent);
   }

   ngOnInit() {
     this.options = {
       itemChangeCallback: AppComponent.itemChange,
       itemResizeCallback: AppComponent.itemResize,
     };

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

   changedOptions() {
     this.options.api.optionsChanged();
   }

   removeItem(item) {
     this.dashboard.splice(this.dashboard.indexOf(item), 1);
   }

   addItem() {
     this.dashboard.push({});
   }

我希望这会有所帮助。

于 2018-08-16T08:31:53.633 回答
1

您没有将对调整大小的项目的引用传递到您的方法test()中。进一步建立在 Sebapabst0 的答案上，这里有一个 StackBlitz 示例：https ://stackblitz.com/edit/angular-ivy-jjati4

于 2020-05-14T10:23:56.080 回答
0

这对我有用：

import { GridsterConfig, GridsterItem }  from 'angular-gridster2';
   options: GridsterConfig;
   dashboard: Array<GridsterItem>;

   ngOnInit() {
     this.options = {
         itemResizeCallback: (item: GridsterItem, itemComponent: GridsterItemComponentInterface) => {
            this.updateSizeOnServer(item, itemComponent);
          }
     };

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

  updateSizeOnServer(item, itemComponent) {
    // call some API tu update the size
  }
于 2020-06-16T08:15:28.527 回答