Угловая сетка 2 изменяет размеры виджета с помощью кнопки

Question

У меня есть элемент гридстера, как показано ниже, и использую 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()

   }

но ничего не происходит нет ошибки в консоли. пожалуйста, порекомендуйте

Answer 1

Я новичок в angular-gridster2, но мне удалось применить некоторые динамические изменения к макету моего гридстера, поэтому я постараюсь вам помочь.

Я не вижу, откуда берется ваше свойство "options", но оно должно быть экземпляром GridsterConfig, поэтому начало вашего файла.ts должно выглядеть так:

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

После того, как вы определили свои параметры, вы можете обновить макет вашего гридстера, вызвав метод api optionsChanged следующим образом:

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

Вы можете обратиться к https://github.com/tiberiuzuld/angular-gridster2, чтобы найти очень маленький и чистый пример того, как динамически взаимодействовать с элементами и изменять макет сетки:

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

Я надеюсь, что это может помочь.

Answer 2

Вы не передавали ссылку на элемент с измененным размером в свой метод test(). Основываясь на ответе Sebapabst0, вот образец StackBlitz: https://stackblitz.com/edit/angular-ivy-jjati4

Answer 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
  }