Как сохранить гридстер-элемент в Базе данных при изменении размера / изменения в статической функции? - PullRequest
Новая
       85

Как сохранить гридстер-элемент в Базе данных при изменении размера / изменения в статической функции?

1 голос
/ 25 марта 2019

После выполнения некоторых действий по изменению размера / перетаскиванию на моей инструментальной панели я хочу сохранить обновленный размер и положение моего измененного виджета в моей базе данных MongoDB. К счастью, библиотека гридстеров имеет возможность реагировать на перетаскиваемые события и изменять их размеры. Но, к сожалению, они статичны, поэтому, когда я хочу сохранить новые значения с помощью службы базы данных, она не работает, потому что не может использовать ее, потому что она не статична.

Я использовал Angular 6 и Angular-Gridster2 6.0.10.

Кто-нибудь знает, как я могу использовать события изменения размера / перетаскивания, чтобы сохранить мои данные?

Вот код (не запускаемый, потому что я его сильно уменьшил): 

export class SheetContentComponent implements OnInit {

  constructor(protected databaseService: DatabaseService,
              private dataService: DataService,
              protected projectService: ProjectService) {
  }

  protected widgetType = WidgetType;
  protected project: Project;
  protected currentDashboardId: string;
  protected user: User;
  protected currentSheetId: string;
  protected widgetPosition: GridsterItem;
  protected currentWidgetId: string;

  protected dashboard: Array<GridsterItem>;

  ngOnInit(): void {

    this.options = {
 gridType: GridType.Fit,
      displayGrid: DisplayGrid.Always,
      compactType: CompactType.None,
      margin: 10,
      outerMargin: true,
      minCols: 50,
      maxCols: 200,
      minRows: 50,
      maxRows: 100,
      pushItems: true,
      pushDirections: {north: true, east: true, south: true, west: true},
      pushResizeItems: true,
      swap: true,
      draggable: {
        enabled: true,
        stop: function (event, $element, widget) {
          console.log("dragable");
          this.saveInDatabase($element.el.id, event, 'position');
        }
      },
      resizable: {
        enabled: true,
        stop: function (event, $element, widget) {
          console.log("resizeable");
          this.saveInDatabase($element.el.id, event, 'position');
        }
      }
    };
  }

  

  /**
   * This method saves the selected options into the database.
   * @param widgetId the id of the widget to save
   * @param value the value
   * @param field the field where to store
   */
  protected saveInDatabase(widgetId: string, value, field: string): void {
    this.databaseService.updateDocument(this.databaseService.WIDGETSCOLLECTION, widgetId, new Fieldvalue(field, value))
      .subscribe(result => {
      }, error => {
        console.log('Error updating database entry ', error);
      });
  }
<gridster  #dashboardgrid [options]="options" class="widget-container" >
  <gridster-item *ngFor="let widget of list" id="widget.id" [id]="widget.id" [item]="widget.position" class="gridster-    design" (mouseup)="enablePointer(widget.id)">
    <!-->more html stuff<-->
  </gridster-item>
</gridster>

Я получаю эту ошибку:

enter image description here

1 Ответ

1 голос
/ 25 марта 2019

this определяется как текущий экземпляр окна при вызове этих функций. Вам нужно изменить свои функции на функции стрелок или связать с this.Делайте это везде, где вы определяете функцию обратного вызова как function () {....Пример: 

draggable: {
    enabled: true,
    stop: (event, $element, widget) => {
      console.log("dragable");
      this.saveInDatabase($element.el.id, event, 'position');
    }
  }

draggable: {
    enabled: true,
    stop: function (event, $element, widget) {
      console.log("dragable");
      this.saveInDatabase($element.el.id, event, 'position');
    }.bind(this)
  }
...