如何在静态函数中调整大小/更改时将gridster-item保存在数据库中？

Question

在仪表板上执行一些调整大小/拖动操作之后，我想将更改后的小部件的更新大小和位置保存在MongoDB数据库中。 幸运的是，Gridster库具有对可拖动事件和调整大小事件做出反应的可能性。但是不幸的是它们是静态的，所以当我想通过使用数据库服务保存新值时，它不起作用，因为它不是静态的，因此无法使用它。

我使用了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>

我收到此错误：

Answer 1

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