angular gridster 2使用按钮调整小部件的大小

Posted 2023-05-07

【中文标题】angular gridster 2使用按钮调整小部件的大小

【英文标题】：angular gridster 2 resize a widget using a button

【发布时间】：2018-09-29 08:39:40

【问题描述】：

我有如下 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

resize 函数是这样的

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

   

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

【参考方案1】：

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

我看不到你的“options”属性来自哪里，但它应该是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's 找到一个关于如何与项目进行动态交互和更改网格布局的非常小而简洁的示例：

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();
   

我希望这会有所帮助。

【讨论】：

但我在他们的所有示例中都找不到调用“changedOptions()”函数的地方...

【参考方案2】：

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

【参考方案3】：

这对我有用：

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