如何在静态函数中的Resize / Change中保存数据库中的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)
  }